CSS: Elements positioning and layering
“Static positioning” refers to the normal flow of the page that we’ve been working with up ’til this point. The other three types of positioning are “relative”, “absolute”, and “fixed”.
The CSS position property lets you alter the positioning scheme of a particular element. Its default value, as you might imagine, is static. When an element’s position property doesn’t have a value of static, it’s called a “positioned element”. Positioned elements are what this entire chapter is about.
relative positioning
“Relative positioning” moves elements around relative to where they would normally appear in the static flow of the page. This is useful for nudging boxes around when the default flow is just a little bit off.
Let’s turn the .item-relative element in schemes.html into a relatively positioned element. Add the following rule to styles.css:
.item-relative {
position: relative;
top: 30px;
left: 30px;
}The position: relative; line makes it a positioned element, and the topand left properties let you define how far it’s offset from its static position. This is sort of like setting an (x, y) coordinate for the element.
Relative positioning works similarly to margins, with one very important difference: neither the surrounding elements or parent element are affected by the top and left values. Everything else renders as if .item-relativewas in its original position. Think of the offsets as being applied after the browser finishes laying out the page.
The top and left properties measure from the original box’s top and left edges, respectively. We can offset relative to the other edges with the bottom and right properties.
For example, the following will nudge the box in the opposite direction:
.item-relative {
position: relative;
bottom: 30px;
right: 30px;
}absolute positioning
“Absolute positioning” is just like relative positioning, but the offset is relative to the entire browser window instead of the original position of the element. Since there’s no longer any relationship with the static flow of the page, consider this the most manual way to lay out an element.
Let’s take a look by adding the following rule to our stylesheet:
.item-absolute {
position: absolute;
top: 10px;
left: 10px;
}Our HTML structure is the exact same as the previous example, but this will stick the purple image in the top-left corner of the browser window. You can also try setting a bottom or right value to get a clearer idea of what’s going on.
This behavior isn’t really all that useful most of the time because it would mean everything on your page needs to be absolutely positioned—otherwise we’d get unpredictable overlaps of static elements with absolute elements. So, why does absolute even exist?
(relatively) absolute positioning
Absolute positioning becomes much more practical when it’s relative to some other element that is in the static flow of the page. Fortunately, there’s a way to change the coordinate system of an absolutely positioned element.
if we change.item-absolute’s parent element to be relatively positioned, it should appear in the top-left corner of that element instead of the browser window.
.absolute {
position: relative;
}The .absolute div is laid out with the normal flow of the page, and we can manually move around our .item-absolute wherever we need to. This is great, because if we want to alter the normal flow of the container, say, for a mobile layout, any absolutely positioned elements will automatically move with it.
Notice how we didn’t specify any offset coordinates for .absolute. We’re using relative positioning for the sole purpose of letting our absolute element hook back into the normal flow of the page. This is how we safely combine absolute positioning with static positioning.
fixed positioning
“Fixed positioning” has a lot in common with absolute positioning: it’s very manual, the element is removed from the normal flow of the page, and the coordinate system is relative to the entire browser window. The key difference is that fixed elements don’t scroll with the rest of the page.
Go ahead and update our third example to use fixed positioning:
.item-fixed {
position: fixed;
bottom: 0;
right: 0;
}This will place the red image in the bottom-right corner of the screen. Try scrolling the page, and you’ll discover that it doesn’t move with the rest of the elements on the page, while the absolutely positioned purple image does.
This lets you create navigation bars that always stay on the screen, as well as those annoying pop-up banners that never go away.
summary
Relative positioning was for tweaking the position of an element without affecting its surrounding boxes. Absolute positioning took elements out of the static flow of the page and placed them relative to the browser window, while relatively absolute positioning allowed us to hook back into the static flow of the page. Finally, fixed positioning let us make elements that didn't scroll with the rest of the page.
Last updated