position property in CSS is very tricky to understand but is a powerful tool when working with layouts.
position values are
absolute: each of these act in their own special way to effect where elements are rendered on the screen and how they effect the rendering of other elements.
Depending on the value of the
right will have different effects on our element.
NOTE This page has positionable examples (there's one already fixed to the top). If you want to toggle these examples, click the button in the bottom right (BTW that's position fixed too!). The inputs represent the
rightproperties on the parent element and tweaking these inputs will move the boxes around so that you can play with these values right in this book.
Static positioning is the default value for the
This means that the position of the current element will be determined only by its box model (width, height, padding, margin, and border).
To move statically positioned elements we can use margins to add extra white space and this will effect any HTML elements that come after the element in HTML.
position: static the
right properties have no effect.
Relative positioning allows us to slightly tweak the existing position of an element from where it would usually be statically positioned.
right push the element from the specified edge.
position: relative will still effect the rendering of based on their original position.
This means that
position: absolute; top: 20px; will start to cover up elements after it so be VERY AWARE of when we use
Except for small changes like lining up inline-block icons,
position: relative is probably not what we want to use for positioning.
Fixed position allows us to set an element to be positioned in the same spot no matter where the element is in our HTML and no matter where the user has scrolled.
right match the specified edge to that same edge of the viewport.
position: fixed; top: 0; right: 0; will "pin" the element to the top right of the viewport.
See the example one on this page?
position: fixed elements are on a whole different plane from static and relatively positioned elements.
This means that when it comes time to figure out where to draw elements on the page, it ignores anything that is
So it doesn't take up room within the parent element.
Absolute positioning allows elements to be positioned absolutely in comparison to other elements on the page.
The way this works is that element looks for the first parent element that isn't
position: static and then uses that to compare where to position the current element.
From there, the
right work much in the same way as
position: fixed does except instead of comparing to the edge of the viewport, the element is positioned comparing to the edge of the non-static parent element.
NOTE if all parent elements are statically positioned, then the element will position itself in comparison to the
bodyelement. This is different from
display: fixedsince scrolling WILL effect the elements position. See the yellow example in the top left (you may need to scroll up).
position: absolute; transform: translateX(100%);
Positioning uses %
I'm the only thing that gives my parent it's size!
Positions to bottom instead of top
I'm might get covered up