--- title: "Understanding the CSS Position Property and How It Works With Example | CoderPad" description: "When using HTML to build web pages, elements are arranged after each other vertically by default. You will always want to add styling to either change your page's layout or organize its elements so that elements can be positioned horizontally on your screen. Learn what the CSS position property is and how you can prope" canonical: "https://coderpad.io/blog/development/understanding-the-css-position-property-and-how-it-works-with-example/" last_modified: "2026-04-15 16:21:03" --- [Back to blog](https://coderpad.io/blog/) # Understanding the CSS Position Property and How It Works With Example November 24, 2022 7 Minute Read By Joel Olawanle [Development](https://coderpad.io/blog/development/) When using HTML to build web pages, elements are arranged after each other vertically by default. You will always want to add styling to either change your page’s layout or organize its elements so that elements can be positioned horizontally on your screen. This is possible with CSS [`flexbox`](https://coderpad.io/blog/development/a-guide-to-css-flexbox/) and CSS [`grid`](https://coderpad.io/blog/development/a-very-very-in-depth-guide-on-css-grid/). However, more is needed to create stunning web pages. The CSS position property fills in the blanks by allowing you to create an asymmetrical web page where you can place HTML elements wherever you want by detaching each element from the normal flow and other elements, making your web page more appealing and easy to navigate. In this article, you will learn what the CSS position property means, how it works, the various values and how they can help you properly position items on your webpage. ## What is the CSS position property? As the name implies, the CSS`position`property is used to position an element on a web page. It specifies and lets you take an element from your web page’s normal flow layout and position it wherever you want it to be using other CSS properties like`top`,`right`,`bottom`, and`left`. The position property has five values that perform different functions, all aimed at helping you position elements. This article will explain how these values work and their differences, making it easy for you to know where and when to use a particular value. ## CSS position values Here are the five CSS position values: 1.`static` 2.`relative` 3.`absolute` 4.`fixed` 5.`sticky` ``` selector { position: static | relative | absolute | fixed | sticky; }Code language: CSS (css) ``` To get started, let’s make use of a parent div with five`div`elements and a paragraph to identify each`div`: ```

This is container One

This is container Two

This is container Three

This is container Four

This is container Five

Code language: HTML, XML (xml) ``` Let’s style these divs to look like this. Five divs with the text This is container One to Four styled in different colors. ### CSS static position The CSS`static`position is the default value for the`position`property. It is the position HTML elements have by default. This`position`value means that an element will follow based on the normal flow of the page and will follow the standard positioning rules as expected with or without any CSS styling. This means when you do not apply the`position`property to an element, it is`static`, meaning most elements you work with are statically positioned. They are not affected by the`top`,`right`,`bottom`,`left`, and`z-index`properties. In the example below, a position of`static`is applied to the second`div`container, but you will notice that it does not affect the element’s output. ``` .container2 { background-color: #7f0df4; position: static; }Code language: CSS (css) ``` Five blocks of This is container in a static position. Nothing is exciting about this position value, but it is worth knowing that it exists 🙂. Let’s explore other position values that change an element’s position from the default position. ### CSS relative position The CSS`relative`position is used to position an element according to the normal flow of the webpage. This position value alone does nothing. For example, if you apply the position of`relative`to the third`div`container. ``` .container3 { background-color: #ce4dcd; position: relative; }Code language: CSS (css) ``` There will be no change to the element and the entire elements in the web page because It works just like the`static`value with more advantages. The relative position alone does not affect how each element is displayed. The advantage of using this property is that it gives you access to directional properties that you can use to move any element without affecting the offset position of the`relative`positioned element. These directional properties include`top`,`left`,`right`,`bottom`, and`z-index`. For example, you can move the element down and towards the right with the`top`and`left`properties. ``` .container3 { background-color: #ce4dcd; position: relative; top: 50px; left: 40px; }Code language: CSS (css) ``` The This is container Three is overlapped on the This is container Four block. You’ll notice that the offset does not affect the surrounding elements because the space the element initially occupies is left empty. At this point, you can begin to ask yourself the use of the`relative`position. Surprisingly, it is not particularly useful because you want to avoid a situation in which other elements are unaffected. This position value can be used to set the`z-index`or specify the stack order of an element, or it can be used as a container for an “absolutely” positioned element. For example, in the preceding example, the third element is stacked on top of the fourth. Adding`z-index`alone to the fourth element will have no effect, but adding a relative position will allow you to stack the element on top of the third. ``` .container4 { background-color: #ef74ff; position: relative; z-index: 1; }Code language: CSS (css) ``` Elements are stacked on each order as a result of the`z-index`property. ### CSS absolute position The`absolute`position is used to remove an element from the normal flow of a web page and then position it relative to the element’s nearest positioned ancestor (any element with a position value that is not`static`). When an element has an absolute position, the elements around it act as if that element does not exist on the web page. Depending on how the elements were previously arranged, the element stays on top of one another and collapses the available space. ``` .container2 { background-color: #7f0df4; position: absolute; }Code language: CSS (css) ``` The`absolute`position value causes the third element to take the place of the second. In the preceding example, the third element takes the place of the second element, leaving the second element to linger. You’ll also notice that the element is no longer the full width. This is because`absolute`positioned elements have the width set to`auto`. The absolutely defined element can now be positioned using directional properties such as`top`,`left`,`right`, and`bottom`. It is also important to understand that this element will be positioned closest to the ancestor. This means that the parent container should be relative to serve as a positioned ancestor. ``` .parent-container { // ... background-color: #ddd; border: 2px solid #000; position: relative; } .container2 { background-color: #7f0df4; position: absolute; top: 0; left: 0; }Code language: CSS (css) ``` The first element is affected by the`top`and`left`properties. Because the top and left positions were set to the starting point, the element is now positioned at the top of the container. You can use this to place an element in the center or at a specific location on your website. If the parent container is not set to a`relative`position, the element will be positioned at the top left of the next positioned ancestor, which is now the body of the entire page. This is container Two is moved outside the blocks of elements. ### CSS fixed position As the name implies, this fixed position is used to fix an element to a specific position of your web page. It removes an element from the normal flow of the web page and positions it relative to the viewport (the part of the document visible in your browser) rather than the nearest positioned ancestor as absolute. ``` .container4 { background-color: #ef74ff; position: fixed; }Code language: CSS (css) ``` The fourth element in the container block is fixed. You will use directional properties to specify a position you want the element to be positioned. ``` .container4 { background-color: #ef74ff; position: fixed; top: 50%; left: 0; }Code language: CSS (css) ``` The fourth container element is fixed and moved outside the parent container. This is mostly used when you want to move a button to the bottom of your page, such as the scroll up button. You can use the fixed position if you also want to fix the nav bar to the top of the webpage screen. When you position an element to be fixed, it will remain in that position even if you scroll through the page, distinguishing it from the absolute position. It also does not leave a blank space as position relative does. A GIF showcasing the fourth container fixed to the page as the parent container is scrolled through. ### CSS Sticky Position The sticky position is very superb. It is a combination of`static`and`fixed`positions. This is because an element will remain in the normal flow of the web page as you scroll until it gets to the specified position, then it becomes fixed. ``` .container3 { background-color: #ce4dcd; position: sticky; top: 0; }Code language: CSS (css) ``` In the example above, all elements will scroll normally until the third element reaches the parent element’s top. It then sticks. It behaves like a static element until it gets to a specified position; then, it becomes fixed and appears to stick to that spot. The page moves in an elastic manner once scrolled through. > ![ℹ️](https://coderpad.io/assets/emoji/2139.svg) For sticky positioning to work, You must specify at least one of the top, right, bottom, or left properties. This is perfect when you have a navbar positioned after your hero section and will like to stick to the top when a user scrolls to the top of the screen. Also, when you have a list of elements with separate headers which you want to stick as the user scrolls, you can achieve this with the sticky position. The illustration displays all`position`property values. Here is a demo that shows the use of all position values. ## Distinguishing between the position property and CSS layout systems The CSS flexbox and grid are layout systems that you can use to define basic and complex layouts. But you can’t place these elements anywhere you wish because you’re limited around the main (X) and cross (Y) Axis. Illustrating how the CSS flexbox and grid layout systems arrange items on the webpage. With the CSS position property, you can place your content anywhere you wish by detaching each element from the other elements. In other words, you can move elements freely around your screen as you are not restricted to any axis. The CSS position property detaches each element and can be placed anywhere. ## Wrapping up In this article, you have learned about position property, how it works, and its various values. You have also learned the differences between these values, so you know when to use a particular CSS position property and its value. Have fun coding! I’m Joel Olawanle, a frontend developer and technical writer interested in making the web accessible to everyone by always looking for ways to give back to the tech community. Follow me and connect with me on [Twitter](https://twitter.com/olawanle_joel). ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Development ## What is Prompt Engineering? Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post. Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development ## A Guide To Using React’s useCallback() Hook Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together. Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development ## MySQL vs. PostgreSQL: How Do They Compare? A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you. Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development ## PostgreSQL LIKE Operator: A Detailed Guide When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator. Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development ## How To Use DataProvider In TestNG With Examples When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG. Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development ## How To Get Up And Running With Django Migrations: A Guide Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects. Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development ## Writing A Parameterized Test In JUnit With Examples A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide. Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development ## How To Use Assert In JUnit With Examples The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples. Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development ## A Simple Guide To TypeORM: What It Is And How To Use It Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is. Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development ## Using PreparedStatement in JDBC With Examples In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code. Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development ## React vs React Native: The Differences Explained React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice. Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development ## Logging in Django The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article. Read the post](https://coderpad.io/blog/development/logging-in-django/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)