Let’s talk about the position property. I know beginners are curious about this. Here’s a question I got recently:
I am fairly new to web design, and haven’t mastered the differences in positioning of elements. I know there is
absolute,fixed, andrelative. Are there any others? Also, do they majorly differ? And when should you use which?
Short answer
There are two more: static, which is the default, and sticky, which is a whole fancy thing. Yes, all of these majorly differ! Each of them is incredibly useful and which you should use of course depends on the desired result.
Longer answer
An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. This is easy to understand when you set the element to display: block; or if that element is block-level by default like a <div>. This means you can set a width and a height and that element will respect that. But elements that are display: inline;, like a <span> by default, are also rectangles, they just flow onto the page differently, lining up horizontally as they can.
Now that you are picturing every single page element as a block of pixels, we can talk about how positioning is used to get the blocks of pixels exactly where you want them to go.
.el {
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
position: inherit;
}static
This is the default for every single page element. Different elements don’t have different default values for positioning, they all start out as static. Static doesn’t mean much; it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn’t cascade.
relative
This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element.
The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.
absolute
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom, and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relative to the page itself.
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. 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.
fixed
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
This might be used for something like a navigation bar that you want to remain visible at all times regardless of the pages scroll position. The concern with fixed positioning is that it can cause situations where the fixed element overlaps content such that is is inaccessible. The trick is having enough space to avoid that, and tricks like this.
sticky
Sticky positioning is really unique! A sticky element will just sit there like a static element, but as you scroll past it, if it’s parent element has room (usually: extra height) the sticky element will behave as if it’s fixed until that parent element is out of room. It sounds weird in words like that, but it’s easy to see what’s happening in a demo.
Related Concepts
- Layout like float, flexbox, and grid.
- The Box Model
What really helped me in understanding all of these options was when I first started using CSSEdit by MacRabbit, being able to see a live preview of the changes you are making really helps to get a full grasp on what each line of your CSS code is actually doing and how it affects the rest of the layout.
PS – No, I’m not affiliated with MacRabbit, just use the product on a daily basis for work.
This is a great resource for anyone entering the web design field.
Dear Chris, please learn the difference between “it’s†and “itsâ€. Thank you.
To be honest, I have always tried to avoid using positioning unless absolutely necessary. Thanks, Chris, my cover has been blown and you give me no excuse not to fully understand it anymore.
Great article!
@Schwallex: Sorry about that, I really try to watch that but I have developed bad habits and it obviously sneaks through sometimes.
As long as we are pointing out each others bad habits, I see on your site that you have each of your h2 elements wrapped in a div that does the positioning. This is extra unnecessary code as the h2 is already a block level element which can be positioned just the same.
Great post! I appreciate its brevity and detail. Thanks!
Nice post Chris!
I wrote something about this too some time ago:
http://www.onyx-design.net/weblog2/css/css-positioning/
i was waiting for something like this.
Thanks a lot!
Thanks Chris! I am new to web designing and I really get confused on the differences of the three. This post makes it more clearer for my understanding.
Well explained, Chris! This is definitely a place I’ll point my CSS understudies at!
I remember the positioning gave me a hard time when I began CSS, so I’m sure this article will be enlighting more than one !
When is it best practice to use a float? Don’t you achieve the same effect a float provides by setting absolute positions to elements inside relative ones? And by positioning elements as absolute you avoid having to clear floats?
I hope I’m explaining my question correctly! Thanks for the post
As what I call a “traditional” coder (essentially that I work in mostly compiled code instead of interpreted code), this was easily the most complicated aspect of CSS for me to learn. This is due to the differences with respect to context.
Thanks for a great read – it’s a great feeling to continue to learn!
To answer fallsemo’s question with some advice: Don’t mix floats and positions if you can help it.
This is just my opinion, and I’m not dismissing the neat tricks that can expose, I’m just advising the suppression of all the problems it can cause.
@fallsemo
The important difference is that floated elements still remain a part of the “flow” of the page where absolutely positioned elements do that. As such, they can be the more “flexible” choice.
hi chirs,
when i am increasing a windows size , the div container is not fixed in a particular position. I also used a absolute position, but it is not working . help me
Hi this is Finsta, thanks for your help! I now understand the scary positioning xD You helped me and many others out. Also the guy in the forum I forgot his name
hey thank you for article relay useful and like brush up what you learn before
thank ones again
Nice post.Thanks..
Thanks for this post Chris. When I started developping for the web I was struggling with it big time. To get the understanding of what is doing what I did some research myself. Now I think I know the difference and I developed a shoppingmall using a fixed header and sidebar.
Great article as usual Chris. Thank you for the information. I usually use floats but will give some of these a go to see who fits best when (if that makes sense).
Hi Chris, as a developer for Bluelounge website that you use for your example above I hope I may share a bit of my experience.
When we started redesigning the site there were less menu items on the left navigation so everything was visible even on 800×600 screen. But as the site grows, the navigation also becomes longer and may not be the most friendly for browsers with smaller screen. I am very aware of this matter and trying to come out with a way to solve this without needing to cut down the menu items. Suggestions are welcomed :-)
Awesome article. You definitely covered everything I have been trying to learn about positioning and it’s uses. Thanks for making it so simple and concise.
Chris, a really excellent summary of positioning – definitely bookmarked for me. Its always useful to read up on the basics, as they are often teh things that I forget and struggle with the most!
Good overview, thanks!
I thought position: fixed; set something fixed relative to the closest parent with position relative (and defaulted to the viewport (<html>)). Any chance of a confirmation?
Thanks for this Chris. I had been wondering why navigation elements aren’t fixed more often. Now I know what to avoid…I think :)
Hi Chris,
Thanks for this post Chris.
I have same problem with fixed position as David asked above.
I think position fixed is relative to and not to view point (Screen).
I have created one page with frame in it.
Frame contain page with one loading image whose CSS are as below.
position:fixed; left:50%; right:50%; top:50%; bottom:50%; height:1px; width:1px;
This image is visible to center when I brows the inner page separately, but it get center to iframe and not to screen when I brows the parent page which contain iframe with this page.
I want the image to center of screen instated of iframe and I tried it but didn’t get desired result.
Is there any way to do this?
I missed <HTML> in one statement.
Correction*
I think position fixed is relative to and not to view point (Screen) >> I think position fixed is relative to <HTML> and not to view point (Screen).
Thank you so much Chris. I really appreciate your “medium answer”. It’s really helpful!
I will add that Fixed elements, when scrolled to their boundaries, do not continue to scroll their parent elements. They just stop scrolling at their boundaries as you’d expect. They can be a good way to get multiple, nested scroll areas that do not interfere with each other, causing unexpected scrolling of the body element.
hey guys
how to learn bootstrap .