An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning

The art of CSS has almost become synchronized with development perfection. While every web developers has been adopting the ease and stability of such language, it’s not a simple breeze initially. When we’re talking about CSS Layers, Z-Index, Absolute and Relative Positioning, CSS beginner often fall into a lot of confusion when they tries to understand them.

Many CSS beginners may start using relative and absolute positioning when constructing their web page layout, because they think that is very easy to position certain element to their desired location just by changing the top and left value in the CSS.

Well, this might works but often is not a good practice. Reason being that position absolute will actually takes stuff out of the document flow, creating many layers above each other and those layers don’t see each other, so nothing will react to each other. This is usually the primary source of major issues.

Z-Index, Relative and Absolute Positioning

[tut demo=”http://www.onextrapixel.com/examples/css-layers/” download=”http://www.onextrapixel.com/examples/css-layers/css-layers.zip”]

Applying Absolute Positioning

Generally, absolute positioning is not advisable for general web page layout. For me, I only use absolute positioning when I need to position something that needs to be in a certain position relative to its parent. For instance, an image that I cannot have it as a background image which needs to sit right on at the corner of a box that will not expand, or take example our OXP RSS Feed that I want it to sit above between 2 div tags.

Some other practical use of CSS layer can be:

  • JavaScript elements flying banners on the page
  • Games where you move an object around
  • Drop down menu become visible when rollover

First take a look at the demo on how each layer stack above each other, we are using Relative, Absolute Positioning and Z-index here and not creating many div within it to stack the layers.

Below we will talk about how each properties behave and provides an example on how we stack each layer.

Relative Positioning

When you position something relatively, you are modifying its position from where it would have been if you haven’t changed anything. It sits on the same layer as the parent’s image or content element, therefore when you specifying top and left value in the CSS. The start point takes it’s pixel count from where the parent’s HTML element left off. Take a look at the example below.

Relative Positioning

Absolute Positioning

Absolute positioning on your web page appear one layer above the HTML element. It will appears at the exact pixel you specify. If you set the parent div to position:relative;, the absolute position layer will appear inside the parent div and take the pixel count from within the parent div. Now take a look at the example below.

Absolute Positioning

Z-Index

How z-index works is an element with a higher number overlaps an element with a lower number.
Try looking at the image example below, and see how the z-index stack the layer above each other.

Z-Index

CSS Layers Example

Alright, let’s go through how we can construct each layer and how you can switch the stacking of each layer and how relative or absolute positioning affect.

Create Basic CSS Layer 1

Let’s create a div tag, and insert some dummy content.

<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>
</div>

By declaring position:relative;, we can hold all the other layers within it.

#layer1 {
    background:#707070;
    color:#fff;
    position:relative; 
    width:800px; 
    height:450px; 
}

Now Create Layer 2

Basically, the content remains the same, just that the CSS properties is different and this layer 2 is declared within the Layer 1 div.

<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>

<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>
</div>
</div><!-- End of Layer 1-->

By applying position absolute, it bring this layer above the HTML element and because Layer 1 is set to relative, Layer 2 will sit within Layer 1.

#layer2 {
    background:#f9ad81; 
    color:#fff;
    position:absolute; 
    top:40px; 
    left:50px;
    width:400px; 
    height:400px;  
    z-index:1;
}

Lastly, Create Layer 3

Is the same as Layer 2, just that the value for top and left in the CSS and the z-index:1; are different.

<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>

<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>
</div>

<div id="layer3">
<h2>Layer 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus 
    PageMaker including versions of Lorem Ipsum.</p>
</div>
</div><!-- End of Layer 1-->

By default, if you never applying z-index:2; for the Layer 3, it will STILL stack above Layer 2, but in this example I specify it to prevent any confusion. So when you want to switch Layer 3 around with Layer 2, just change the z-index value smaller than Layer 2.

#layer3 {
    background:#6dcff6; 
    color:#fff;
    position:absolute; 
    top:80px; 
    left:100px;
    width:600px; 
    height:200px;  
    z-index:2;
}

You can try changing the z-index value for Layer 2 and Layer 3 and see how each of them stack above or change the positioning between relative and absolute and see how each layer react.

Lastly, for z-index the value can be any value as long as the layer you want to be at the bottom is smaller than the top. It can be just like z-index:999; for Layer 2 and z-index:1000; for Layer 3.

Until now, you can get a rough idea on how each layer can stack above each other. If you are still unclear about how this work. I will advise you to download the demo and play around with it, because learning CSS need some hands-on practice and not just by reading.

[tut demo=”http://www.onextrapixel.com/examples/css-layers/” download=”http://www.onextrapixel.com/examples/css-layers/css-layers.zip”]

Bonus Tip

Most of the time, the layers are used in more dynamic way, like for instances, to make drop down menus visible when triggered. But often there is a problem when you have another JavaScript component, take example from 18 Inspirational Image Content Sliders Design Showcases, when you have a drop down menu, it will often go behind the JavaScript component, and not display above of the JavaScript component.

What you can do to solve the problem when drop down menu appear behind the JavaScript component, is to try changing or adding the z-index in the CSS to that layer, most of the time it will solve the problem.

Alright, I hope I have share a clear explanation on Z-Index, Relative and Absolute Positioning, as well as some good practices and pointers to take note.

Do you have any other CSS techniques or skills you wish to share? Get in touch using the contact form.

Comments

    • mommaroodles,
    • August 2, 2009
    / Reply

    Hi thanks for tutorial, I never really fully understood this, it makes such perfect sense to me now, and it’s helped me with a problem I was having :)

      • Terrance,
      • August 2, 2009
      / Reply

      Glad that this tutorial is of beneficial to you.

    • Hanno,
    • August 4, 2009
    / Reply

    Thx was helpful to get a deeper understanding

  1. / Reply

    Good article, this combined with transparent PNG’s = amazing

    • Arnold,
    • August 6, 2009
    / Reply

    thanks for the tutorial!

  2. / Reply

    Thanks a lot for this article.
    I enjoy reading it.:)

    I have question here. If I copy and paste an internal CSS for a page and I make it as external CSS, does it affect the result in the web browser?

    Before this, I was tried to create fix header and footer in my web page. The actual source code is in internal page. But, I want to use it with other pages. So, I create a new external CSS and link them to the specific pages. When I view at the Google Chrome browser, it fit perfectly like the tutorial. But, when I view at the Internet Explorer, the result are different. Until now, I have no idea how to solve it. (T_T)

    • Kasper,
    • February 14, 2010
    / Reply

    Hi,

    Looks very interesting. Raises two more questions for me though:
    1. Can I use CSS layers with flash as well? Fx: A swf background on a webpage, with a “normal” html menu on top – using css layers?
    2. Is transperancy supported? Can I make a page using flash background and load a image with transparency on top, using layers, but keeping the transparency intact?

    Thanks a lot for any feedback on this!
    /Kasper

    • Moin,
    • May 31, 2010
    / Reply

    Hi

    i have a different problem at http://mhs.pbodev.info/bleater/bleat/bleat.

    i used a tag with position absolute and need to give it a tooltip to show on hover.

    Both and tooltip have position:absolute. so it works in ie8 and mozila but not in ie7 and 6.

    can someone help me to solve this problem.

    Thanks in advance.

  3. / Reply

    Interesting function, but I can really find a use for it

    • mahfuj himel,
    • May 4, 2011
    / Reply

    This is really amazing.It make me clear about positioning.Hope, i’ll be benefited from this.
    Thanks.

    • siju,
    • May 26, 2011
    / Reply

    Thanx very much for this tutorial . I want use flash as background, now my problem has solved :)

  4. / Reply

    CSS seems to be a good computer language, but it’s difficult for me to comprehend it.

    • jeffz,
    • October 20, 2011
    / Reply

    position absolute and z-index
    ————————————-
    1. position absolute is not really “absolute”, but relative to containing, positioned element.

    2. z-index does not work 1,2,3 etc really.
    If you have flowing positioned elements and absolutely positioned elements within “flowing elements”, then absolutely positioned element with z-index:10 can be covered by element positioned absolutely in flowing as next element with z-index: 5

  5. / Reply

    ..it’s a little difficult for me to learn, but i will read carefully for a couple of times..thanks for the beautiful work. ;)

  6. / Reply

    Hi Terrance,
    Great article for helping solve some often basic problems for newbie web designers. I’ve just used it for the little snippet of information at the bottom about floating the css menu over the javascript. Worked perfectly.
    Cheers matey
    Andy

    • Frederick,
    • May 30, 2012
    / Reply

    Thanks,

    Your article solved a major problem for me in layering type, in a precise position, over a table with nested images. I was searching the web for an answer and when I arrived at your illustration I knew I had hit paydirt! Thanks.

    Frederick

    • tutul,
    • September 6, 2012
    / Reply

    Hi,

    Thank you for clear my z-index concept.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.