CSS layout properties may intimidate you, especially if you’re learning web development for the first time. Especially the position property. Some even claim it’s an advanced subject. Nevertheless, it is essential to understand how CSS affects the alignment of elements on the page. CSS allows a few different methods for positioning elements, and the most common are position, float, and display. We discussed the display property that specifies the display behavior of an element in the previous article, but this time we will learn more about the CSS property, called position. We will learn what position property is, the types, how they affect the position of an element on a page, how they compare to each other, and most of all what is the typical use for each position property. Let’s get started!
What is position property?
The position property sets how an element is positioned in a document. It goes hand in hand with the top, right, bottom, left, and z-index position properties and helps you manipulate the final position or location of an element. If you want, you can always check the position of an element of your choice through the browser dev tools, just go to the Styles panel and choose computed and search for the position.
The position property can take five values:
Let’s discuss each of them and see how each value determines how an element is positioned in a document.
1. position: static
Position: static is the default value for every HTML element on the page. It means that an element is positioned according to the normal page flow. Position property won’t be affected by properties that can make an impact on other CSS position types, so if there are left, right, top, bottom, and z-index properties set, they will not affect an element with position: static.
- the default value for every HTML element
- respects the normal render flow
- not affect by left, right, top, bottom, and z-index properties
The practical use of position: static
Statically positioned elements (in technical terms these elements are not positioned at all) represent the default value for all elements. In practice, this will work in more than 99% of cases of web development, especially if you’re developing standard websites.
2. position: relative
What the relative position really means is “relative to itself”. It is actually just like the static position, however relative to its static default position this value uses the advantage of using top, right, bottom, left and z-index to determine the final position.
If you set relative position on an element without at least one of the positioning attributes (top, right, bottom, left), the defined position will not affect the element’s positioning at all, and it will stay exactly as it would be if you left the default static position.
In simplified terms, just like with the static value, an element’s original position still follows the render flow of the document, but the properties of top, right, bottom, left and z-index move the element from the original position – they relocate it relative to its initial position. When we want to specify the amount of offset to an element, we need to set the values for at least one of the values, either top, right, bottom, left, or z-index value. However, notice – there will be extra space where the element would have been. Therefore, the offset we specify will not influence the position of any other element on the page. Consequently, the space given to the element in the page layout is the same as if the position was static.
In practice, for example, if you give a relatively positioned element a positioning attribute top: 100px, it will move the element 100px down from where it would be and will leave that extra space where the element would have been if we hadn’t moved it. The moved element doesn’t influence the position of any other element on the page. Even if you don’t set a z-index value, the relatively positioned element will now appear on top of any other statically positioned element, in the example above it will appear above the element that is positioned below (if it’s positioned close enough). This is called a stacking effect, very similar to creating a set of layers that are stacked based on the element with the specified z-index. You can’t fight it by setting a higher z-index value on a statically positioned element, because a statically positioned element doesn’t accept position attributes. So, if you want to avoid that stacking context, we need to set that value to auto.
- similar to the static position
- respects the normal render flow
- left, right, top, bottom, and z-index offsets have an effect
- extra space left where the element would have been without offset
- does not influence the position of any other element on the page
The practical use of absolute position: relative
In practice, you will probably use position: relative to “fix position” of elements that do not line up how they should, or at least you would want them to line up (we’re talking about one or two pixels nudge).
It can also be applied to an element when we know the inner element of that element is going to be positioned absolutely. For example, when we have two divs and the outside div is a static block and elements inside the outer div are going to be positioned: absolute relative to the outer div. Then we use position: relative for the outer div and inner div should use position: absolute. Now the inner div elements can be placed anywhere using top, right, bottom, and left attributes of CSS.
3. position: absolute
Absolutely positioned elements are closely connected to their parents. Rather than being positioned according to the viewport, absolute elements are positioned relative to the nearest positioned ancestor (which means that the parent element has to have a position value other than the default position: static). If their closest positioned ancestor does not have that position, an absolute element is positioned relative to the next parent element that is positioned (other than static). And if even that is not the case, the absolute element will be placed relative to the initial containing block and will move with scrolling.
The element with absolute position is removed from the normal document flow. No space is created for that element in the page layout and other elements behave as if that element is not in the document – like the absolute element never existed in the first place – and this is probably the biggest trade-off with absolutely positioned elements. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
All the other positional properties – the values of left, top, bottom, right, and z-index will work on the element with absolute position and will determine the final position of the element. If the value of the z-index is not auto, it will create a stacking context.
By default, absolutely positioned elements span 100% of the width of their parent element and are as tall as their child content. The total width and height is their content + padding + border width/height. It is useful to know that absolutely positioned boxes margins do not collapse with other margins.
- removed from the normal document flow
- no space is created for that element in the page layout
- other elements behave as if that element is not in the document
- the values of left, top, bottom, right, and z-index work and determine the final position
- positioned relative to the nearest positioned ancestor
- if there isn’t any positioned ancestor, it is placed relative to the initial containing block
The practical use of absolute position: absolute
The practical use of absolute positioning is quite rigid and makes it difficult to write layouts that respond well to changing content because they are too explicit. However, absolute positioning comes in handy, if you require freely moving elements around a page, such as drag and drop situations. Another example is when you need to overlay elements on top of each other or other layout techniques that would benefit from working on a coordinate system. An example of a chessboard game is a fine reason to use it. An undervalued benefit of absolute positioning is that it allows localized absolute positioning within the nearest positioned (not positioned: static) parent element. Absolute positioning offers precise control over nested elements on a page, without sacrificing the overall page layout.
However, when developing a more standard website, such as a site providing some publicly available service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users, so it is better to avoid it.
4. position: fixed
Compared to the relative position, the position: fixed does not respect the normal render flow and doesn’t leave any space where the element would have been located in the page layout. A fixed position will force the element to be positioned relative to the viewport (the screen the user can see) – this way the element will stay fixed even if the page is scrolled. The fixed element is positioned relative to the viewport except when one of its ancestors has a transform, perspective, or filter property set to something other than none, and in that case, that ancestor behaves as the containing block.
Compared to the elements that have an absolute position, the fixed positioned elements are removed from the flow of the document too, but unlike absolutely positioned elements, they are always relative to the document and not any particular parent. The scrolling does not affect them, which means they always stay in the same place even if the page is scrolled.
With position: fixed we automatically achieve a new stacking context, and we need to use the top, right, bottom and left values to determine the element’s final position. In printed documents, the element is placed in the same position on every page.
- similar to absolute position
- does not respect the normal render flow
- doesn’t leave any space where the element would have been located in the page layout
- causes the element to be positioned relative to the viewport and not the parent (like absolute)
- stays in the same place (creates a “floating” element) even if the page is scrolled
The practical use of absolute position: fixed
Position: fixed is often applied for a navigation bar because you want it to remain visible at all times regardless of the page scroll position. However, there is one concern with fixed positioning, if there isn’t enough space available – it can cause situations where the fixed element overlaps content in a way it becomes inaccessible.
5. position: sticky
Element with a sticky position presents a mix, a sort of compromise between relative and fixed positions – as a result, the element is “stuck” when necessary while scrolling. That means a sticky element acts like a relatively positioned element to anything on the document (it is positioned according to the normal flow of the document) until the scroll location of the viewport reaches a specified threshold – a certain scroll point on the screen – and after that point, the sticky element acts as a fixed element – it takes a fixed position where it remains persistently displayed. From that point, a stickily positioned element is offset relative to its nearest scrolling ancestor and nearest block-level ancestor, including table-related elements, based on the values of top, right, bottom, and left. The element offset does not affect the position of any other elements.
In simple terms, the sticky element depends on the user’s scroll – on how far the user has scrolled – at first, it behaves like a relative element and after the viewport meets a specified position it gets “fixed” in a spot. A sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
- a mix between relative and fixed positions
- depends on how far the user has scrolled
- acts as a relatively positioned element to anything on the document until a certain scroll point on the screen
- after that point, the sticky element takes a fixed position
- at least one of the top, right, bottom or left positions must be defined
- Internet Explorer does not support position: sticky
The practical use of absolute position: sticky
Stickily positioned elements always create a new stacking context, so stick elements are predominantly used for keeping something shown on the screen throughout scrolling, and we can also hide elements in the same way. A common use for sticky positioning is for the headings in an alphabetized list. For example, The “B” heading will appear just below the items that begin with “A” until they are scrolled offscreen. And then the “B” heading will remain fixed to the top of the viewport until all “B” items have scrolled offscreen, and then it will slide offscreen with the rest of the B items, at this point the “C” heading will show up instead of the “B” heading.
Two position values that work on any CSS property and HTML elements
We could also mention two additional position values, which work on any CSS property, and on any HTML element:
- initial: sets position property to its default value
- inherit: keyword specifies that property should inherit its value from its parent
Bootstrap offers three additional values for controlling element position
You should also keep in mind that Bootstrap offers three additional values for controlling element position that are also worth mentioning:
- fixed-top: fixes the element to the top of the screen (aka top of the viewport), extending from edge to edge
- fixed-bottom: fixes the element to the bottom of the viewport, from edge to edge
- sticky-top: fixes the element to the top of the screen, from edge to edge, but only after you scrol past the element