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=”https://onextrapixel.com/examples/css-layers/” download=”https://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=”https://onextrapixel.com/examples/css-layers/” download=”https://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.

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.