Kilian Valkhof

Front-end & user experience developer, Jedi.

Understanding CSS Positioning part 1

CSS & HTML, 5 May 2008

Without a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a lot of ways to position an element, all with various (dis) advantages. This series of articles will thrive to explain the possibilities you have in positioning. It doesn’t only cover positioning, but also properties that define layout such as display and float, and a preview of the new CSS3 layout modules.

This part will introduce the positioning and display property. Part two, which will be published next week, will go more in-depth with the display attribute and delve into the float property. The last part, published the week thereafter will be a preview to the new CSS3 layout modules.

Display:hehwha?;

Before we start, it is worth noting that there are basically two types of ways to display an element in CSS: block and inline.

Display:block;

Block can be, quite literally, seen as a block. It has a specified width and height, optionally controlled by its content, but dimensions set by CSS have prevalence. Another property of elements with display:block is that they do not allow elements on the same “line” as their own. So while an element might have a small width, The next element will always be placed under it. So two simple divs with display block look like this:

Display:inline;

Display:inline is somewhat the opposite. Elements with display:inline always take their width and height from the contents, and will ignore any dimensions specified in the CSS. (Internet Explorer will, incorrectly, let you do this. Thanks NatalieMac!) Another opposite is that, as the name suggest, these elements are displayed in-line, so they will always be next to the preceding element, providing that the preceding element is inline as well and that there is enough width left. If the width of the “line” is filled, an element with display:inline will wrap to the next line. That looks like this:

That leaves display:none, which is really easy for me to explain: it doesn’t display. Which looks like…no I’m sorry, I’m not going to display images of nothing.

There is a multitude of other display: properties such as table and inline-block. I’ll talk about them in the second article, next week.

Flow

With positioning, the elusive “Flow” of CSS positioning comes into play. The flow in CSS is the logical way in which elements get placed on your screen. For example, when you turn off the CSS on this page, you see the HTML in its original order. That order is the flow, and dictates which element gets rendered and placed where. It’s very simple: the flow of a page is from the top of the HTML to the bottom of it.

Positioning.

One of the most misunderstood properties of CSS. This is partially because the display differs to wildly in different browsers, but also because the property is, in my opinion, misnamed. It’s not so much the position you declare, but in what way the element should interact with the elements around it.

Positioning also differs when you use the display property with it. The way positioning and display interact is a bit tricky: position:static and position:relative can be both display:block and display:inline, while position:absolute and position:fixed (and floats, more on that in the next article) will always be displayed as block elements.

We’ll start with the most simple positioning value, static.

Position:static;

This is the basic positioning of an element and also the most simple one. An element with position:static fills the space its contents need. whether that is display:block or display:inline depends on the element’s standard display (for example, a <div> has display:block, while a <span> has display:inline) or on what you specify in your CSS.

Offsetting (using top, bottom, left and right) doesn’t do anything.

Position:relative;

This value is very similar to position:static, with one vital difference: While a rendered element does get the width and height of the element, it doesn’t have to occupy the space designated for it. The properties top, right, bottom and left allow you to shift it away from that space. The offset here are the borders of the designated space. So for example, an element with position:relative and top:20px and left:20px; looks like this:

Where the grey part is the designated space.

The elements next to it in flow use the designated space as the “real” place of the element. So when you place a div right under the element pictured above, it looks like this:

See how the positioned element sits above the one below it?

Position:absolute;

Absolutely positioned elements are a very different beast altogether. The biggest difference is that an absolutely positioned element gets taken out of the flow. This means that it doesn’t interact with other elements around it. The elements around it pretend that the element just simply doesn’t exist.

The top, right, bottom and left properties do something vitally different as well: The control the offset from the first parent element that is positioned relatively or absolutely. Unless you have elements in your CSS with position:relative, position:fixed or position:absolute, this is the root element, which is <html>. In the specifications, this is called the “initial containing block“.

So an absolutely positioned element with top:20px and left:20px within a relatively positioned element looks like this:

There are some problems with positioning absolutely, this article by paul’OB describes them quite well.

A fun trick with position:absolute is defining top and bottom or left and right without defining, respectively, a height or width. Since the standard value of those is auto, the element will size to fill the space. Unfortunately this does not work in Internet Explorer.

Position:fixed;

Fixed is somewhat of an unknown value, mostly because Internet Explorer 6 (thanks Laura!)does not support it. Fixed does essentially the same as position:absolute with one vital difference: It doesn’t take its offset from a parent element, but always from the viewport, your browser window. This essentially means that, when you scroll, the element stays visible and doesn’t move with the rest of the page. Forever taunting your efforts from it’s fixed positioning, smirking as your futile attempts to move it continue to fail…Sorry, I got carried away there. Anyway,

Z-index

Another property coming into play with positioning is Z-index. This property allows you control which absolutely, fixed or relatively positioned element is placed on top. Z-index on any element without position:absolute, position:fixed or position:relative does nothing.

To understand Z-index, one bit of the specifications is rather important:

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a “z-axis” and are formatted one on top of the other.

The specifications

This is called “Stacking”, and a number of elements stacked on top of each other is called a “stacking context”. I suggest you try not read the specifications on this, they are very technical and difficult to follow.

Worth noting though, is that every time you declare a Z-index, you create a new “stacking context”. This essentially means that any element within the current element will use the parent’s Z-index as a starting point. This is better explained with the following example. Using this CSS:


.relativeblock1 {
	position:relative;
	width:200px;
	height:80px;
	z-index:51;
}
.absoluteblock1 {
	position:absolute;
	left:10px;
	top:90px;
	width:40px;
	height:40px;
	z-index:1;
}
.relativeblock2 {
	position:relative;
	width:200px;
	height:80px;
	z-index:50;
}

And this HTML:


<div class="relativeblock1">
	<div class="absoluteblock1"></div>
</div>
<div class="relativeblock2"></div>

Then those two combined will give this image:

Can you see how, even though .relativeblock2 had a much higher z-index (50), it is below .absoluteblock1, which only has a z-index of 1? This is because .relativeblock1, with a z-index of 51, made a new stacking context where the z-index of .absoluteblock1 can be seen as “51.1”. For a more thorough explanation, read this article on stacking in CSS by Tim Kadlec or check Krijn Hoetmer’s test case.

This concludes the first part of the series. The next article in this series will be about floating and some of the more advanced uses of display. See you next week!

Update: part two of Understanding CSS positioning is posted, check it out!

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. I just start with div. Thanks for the lesson learned too many new

  2. Adnan Muzzaffar

    Excellent post. May be you’d like to make it perfect by correcting the reference of .absoluteblock2 to .absoluteblock1 as the actual class is of absoluteblock1 and this can be confusing to the newbies.

    Can you see how, even though .relativeblock2 had a much higher z-index (50), it is below .absoluteblock2

  3. […] Source […]

  4. Well done. I appreciate you taking the time to write this. One of the better posts on the subjects you touched on.

  5. […] of the Day – Science Wiretapping by anyone – Legal Verisign Sitefinder Patent Approved – Internet CSS Positioning Part 1 – Software Digital TV will come as a surprise to some! – Media Wacko reveals hints to his power deice – […]

  6. […] Understanding CSS Positioning, Part 1 – Kilian Valkhof […]

  7. […] Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  8. Really fantastic article and we will be using it in our courses.
    Thanks,

    C

  9. […] Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  10. […] of the new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in […]

  11. Thank you,. another great tutorial I find that carves my pathway to full understanding CSS. I’m still a little bit oof but the Z-Index example gave me a better example of how to stack my content evenly.

    Thanks.

  12. Thanks Kilian, very well explained! Whereas the information is well covered on the web, It’s rare to find writing that covers it succintly and effectively – while still being engaging.

  13. thanks so much for this great post of css

  14. […] pentru css stuff, like: http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/ […]

  15. […] 9- 理解CSS定位Part 1 […]

  16. […] Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  17. Thanks for the article, this will be a very useful resource!

  18. […] http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/ Get the RSS Feed January 25, 2010 at 5:27 pm by Bharat | Category: CSS | […]

  19. What about Display:Inline-Block?

  20. Great post thx!

  21. […] 5, 2010 I will be using this 3-part article for my HTML/CSS class next week – it’s a worthy read! Posted in Uncategorized | Leave […]

  22. […] the layout. Several possible workarounds are detailed in this post. [color=Teal]CSS Positioning 9- Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  23. […] 理解CSS定位Part 1 […]

  24. […] Understanding CSS Positioning Part 1 – via Kilian Valkhof […]

  25. Gracias por la claridad de tu artículo, muy util!

  26. Hello Kilian,

    Thanks so much for this post, I’ve been desperately looking for CSS tutorial on the Net :)

  27. By far the best article I’ve seen on CSS tags like position, display, z-index, and how to deal with floats.

  28. […] 9- 理解CSS定位Part 1 […]

  29. […] 9- 理解CSS定位Part 1 -一系列很有趣的文章,这些文章不仅包括定位,还包括包括定义布局的属性,比如display和float ,和对CSS3 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 将会带给你对定位的更深的理解. […]

  30. Something wierd is going on with the bottom of this page. It may be because either you or some one else copied text from Microsoft Word and put on the internet. I see a bunch of little squares.

    These are squares on my computer.
    一系列很有趣的文章,这些文章不仅包括定位,还包括包括定义布局的属

  31. […] Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  32. Thank you for this website.It’s a little bit difficullt understanding HTML and CSS when your creating your website by your self , but that the beauti ot it. thanks again.

  33. […] Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  34. […] spot in the layout. Several possible workarounds are detailed in this post.CSS Positioning9- Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that […]

  35. […] Understanding CSS positioning, part 1 […]

  36. […] of the new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in […]

  37. jiraiya245
  38. thanks for the informative css toturial .. it is really helpful :)

  39. paritosh

    Thanks :)

  40. Andodew

    Thanks a lot!!

  41. In many many opportunities I think css is great, and in others I think “why cant I simple vertical align!!!” or things like that.
    Thank for the guide.

  42. P.P.

    Fantastic! A tremendous explanation for those of us who can’t flex our css-muscles, because we don’t yet have them.

  43. Dhiraj

    Thanks!!!!

  44. Lots of spam comments here around this great post.
    Men, you are scratching my head with your comments :)

  45. […] Part 1 | Part 2 | Part 3 […]