So its been about 5 or 6 months since I’ve started working with CSS and lately I’ve been working with the position property often. Basically, just changing the value of relative, absolute, static, or fixed until it works like I would want it to. This post will be some of my research to see what these terms mean, do, and most importantly: how to properly use them in CSS.
First I looked up the definition of the property which I get: The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed). Doesn’t mean much to me at this point. I know it basically tells the browser there to position content/elements, but what does the rest of that mean?
In CSS the default position is static. So if you don’t apply any other values to content (pictures, text, whatever) it will be static. This means that all of the containers will stack one on top of another like how you would think it would lay out on a page. Think of blocks placed one on top of another. But using static you wouldn’t be able to shift those elements around using offset properties such as top, right, bottom and left.
Relative works similarly to static but you can change those offset properties. Like so:
Elements will be stacked one on top of another but you will be able to push an element to the left or right and also change other properties that are unable using the static value of position.
Now onto the absolute value…with this the elements are removed from normal flow (no longer stacked on top of each other) and each element can be put anywhere. It isn’t affected by the other elements’ locations. You can set the offset properties so one element is located in the top left corner of a page while another is in the bottom right corner. It is responsive to the page’s size. If you change the size of a page the elements will remain in those positions and will even overlap each other if the page size shrinks. Or place one element within another element. Like this:
Absolute elements also scrolls with the page as you scroll down or up.
Finally there is position: fixed. It acts similarly to absolute where you can change the offset properties and it isn’t affected by the other elements on the page. However, where you set the rules for the element it will remain there regardless of how small or big the page is.
In this example, the light grey icon will always remain in that position behind the text and in the left hand top corner of the page, even when a reader scrolls down to read the rest of the article:
And this footer will always remain at the bottom of the page regardless of where you are and where you scroll on the page.
I think this all has helped me visualize and figure out what each of the position values do. Quick notes:
- Relative: default position, acts like blocks, elements stack on top of each other, cannot change offset properties.
- Static: elements stacked on top of each other but gives ability to change offset properties.
- Absolute: elements are not affected by other elements, can change offset properties, will remain where it is set on the page regardless of how big or small the page is.
- Fixed: follows much of the absolute rules, but will remains ‘fixed’ to where it is told to even with scrolling.