The position property allows you to specify position values for an element. You can move an element around the page in relation to the document or parent elements. You can take an element completely out of the HTML flow and fix it permanently in one position.
/* Example position css */
div {
position: relative;
left: 20px;
}There are a number of values you can assign to the position property. Each causes different positioning behaviours. It can get a little confusing and it is definitely good to practice using the position property in different ways. Some of the different values you can assign to the position property are:
| Value | Description |
|---|---|
| Static | Every element is set to static positioning by default. This is the natural positioning in the HTML flow. |
| Relative | The element remains in the HTML flow but can be nudged around by adding top, bottom, left, right values. Other elements remain effected by its original position. |
| Absolute | The element is removed from the HTML flow and other elements ignore it. Top, bottom, left, right values manipulate the element in relation to the viewport/document, unless its parent element has relative positioning. |
| Fixed | Fixed elements behave like absolute elements but are always positioned in relation to the document. A fixed element will remain in position when the document is scrolled. |
| Sticky | A sticky element will scroll until a specific position is reached then it remains fixed. Sticky doesn’t work on all browsers. |
Once you have assigned a position value you can include a coordinate value for left, right, top, bottom, and z-index.
div {
position: absolute;
top: 20px;
left: 100px;
}A declaration of left: 100px; will move the element 100 pixels from the left edge of the original position or parent element, effectively moving it to the right. Z-index refers to the stacking order of elements. By default, elements have a z-index of auto or 0. An element with a z-index of -1 will be positioned behind other elements in the document.
Let’s look at the position property in action:
In the following videos, I demonstrate how the position property could be used to create particular effects. Firstly, I create an image caption that overlaps an image element. The final video focuses on the fixed value for position, where I make a webpage header that remains at the top of the browser, even when the page is scrolled.
Here is the final code, if you need to reference it:
