CSS Position Property

#css #webdev #beginners

We have all been there before. Randomly trying different CSS properties to try get your page layout correct. This brute force approach to problem solving can be frustrating. You will finally get one thing right but mess up something else and have no idea why! I am going to try to fix this dilemma for you with this article. Knowing what each type of positioning is in CSS and how they work will greatly speed up your workflow and allow you to make some pretty amazing things!

The Position Property

The CSS Position Property has multiple values that makes it seem overwhelming at first but I promise once you get the hang of it, its easy! The Position Property has 4 values that you need to understand. There are also properties that will fine tune your layout like top, left, right, bottom, and z-index. Depending on which of the 4 values you use, will determine how those fine tuning properties will effect your layout. Don't worry I know I just packed a lot into those last two sentences. I am going to break down each of these positions to make it a little clearer.

Static

I know you are familiar with Static positioning! It is the default position for HTML elements. All static means is that the positioning is based on the normal flow of the page. Since everything is based on the normal flow of the page the fine tuning properties I mentioned earlier do not work with static.

default positioning of HTML elements
will position elements based on the normal flow of document
left, top, right, and bottom do not work with this position

Relative

This property is named very well. position: relative bases all positioning relative to its normal position. We are allowed to use the other position properties. When we set a top, left, right, or bottom it will adjust the position of the element according to where it would have been normally. One thing to keep in mind is when you make these adjustments there will be no automatic adjustments for the gaps you create. All other elements will adjust according to the original 'normal' position of the element while the position properties will adjust where it actually shows up on the page.

positions elements relative to its normal position
other elements will not adjust for any gaps and base their position off the relatives 'normal' position

Fixed

position: fixed is used when you want to position an element to one place according to the viewport. When using our position properties with fixed, it will base all positioning according to the entire viewport. Once it's established, it will remain there even if the user scrolls. It is fixed in position! Important things to remember:

items positioned according to viewport
other elements will not adjust to make up gaps
elements are fixed and will not change there location on viewport when user scrolls

Absolute

position: absolute will position its element outside of the normal flow of the page. This means that other elements will not care where this is. This can lead to overlapping content if not managed properly. The absolute positioning will be based on its nearest positioned ancestor. It will ignore any none position elements and go and look for an element that has some position property attached. If it can not find one it will base its position on the document body. Since this is position outside of the normal flow of the document, other elements will not adjust for this elements position.

positions outside of normal flow of page
positioning is based on its nearest positioned ancestor
if no positioned ancestors will base position on document body.

If I changed my positions to be 0px from the left it will overlap the content of its parent div.

If my absolute div does not have a position ancestor it will position based to the document body.

Z-index

z-index is used to control overlapping elements. With the z-index you can adjust what element is on top of each other. This works for position elements only. This will not work for static position elements. To control the overlapping you just give you z-index a value. The largest number will be on top and the smallest number on bottom. You can use -1 if you want the element to always be in the very back of the document. If you do not give your elements a z-index it will default to putting whatever element came last in your html on top and keep that order for all overlapping elements. In the example below I have overlapping elements but never established a z-index.

controls the order of overlapping elements
largest number will be on top and smallest will be on bottom
if no z-index established will default to putting the last element in html on top

In the example below I added a z-index to each div. This is how I reversed the overlap from before.

I hope this article helps clear the confusion on CSS positioning and takes your page layouts to the next level. Next time your stuck on a frustrating page layout issue just take a step back reference this article and see how each of your divs are position. From there you can troubleshoot and get back on track in no time!!