Thursday, March 28, 2024
HomeWeb developmentMastering z-index in CSS - SitePoint

Mastering z-index in CSS – SitePoint


The z-index is a property used to regulate the ordering of layers within the doc. Components with a better z-index worth seem above components with decrease values. Very similar to how the x and y axes on a web page decide the place a component positioned horizontally and vertically, z-index controls how they stacked on prime of one another on the z-axis.

z-index infographic

Default Stacking

When writing our HTML, components that seem decrease down within the doc, naturally stack above components additional up.

<physique>
<header class="site-header"></header>
<important class="site-content"></important>
<footer class="site-footer"></footer>
</physique>

Given this snippet of HTML, the footer would stack on prime of the principle content material space which might stack on prime of the header in the event that they had been all positioned to overlap one another.

Components could be overlapped by utilizing a mix of place properties and offset properties prime, proper, backside and left.

If I set place: absolute on every of those components, they’ll all format on prime of one another. The footer comes final within the doc so by default stacks on prime of the earlier two components.

.site-header, .site-content, .site-footer {
place: absolute;
width: 400px;
padding: 20px;
}
.site-header {prime: 0; left: 0;}
.site-content {prime: 50px; left: 50px;}
.site-footer {prime: 100px; left: 100px;}

If I take advantage of the offset properties, prime and left, we are able to see the order extra clearly.

Stacking Context

While utilizing place: absolute which creates components that overlap one another, we’ve not but created what’s often called a stacking context.

A stacking context is created in any of the next methods:

  • a component with place absolute or relative and a z-index worth that’s not auto
  • a flexbox merchandise with z-index worth that’s not auto
  • a component with an opacity lower than 1
  • a component with rework set to something apart from none

By far the most typical approach of making and utilizing stacking context is the primary instance on this checklist so let’s concentrate on that for a minute.

Going again to the sooner instance, now we have three components positioned on prime of one another however presently, they don’t have a z-index worth.

The z-index property permits us to regulate the order of the stacking.

If I set z-index: 1 on the footer, z-index: 2 on the important and z-index: 3 on the header, the order of the default stack could be fully reversed.

This seems fairly easy on the floor; the upper the z-index the upper the ingredient stacks – so a z-index: 9999 will all the time be on prime of z-index: 9. Sadly, it’s a bit extra complicated than that.

z-index inside stacking contexts

<header class="site-header blue">header</header>
<important class="site-content inexperienced">content material
<div class="field yellow"></div>
</important>
<footer class="site-footer pink">footer</footer>

If I add a field inside the site-content container and place it simply outdoors the underside proper nook, we are able to see that it’s above the inexperienced field and under the pink field.

.field {
place: absolute;
backside: -25px;
proper: -25px;
z-index: 4; 
width: 75px;
peak: 75px;
border: 1px stable #000;
}
.site-header {prime: 0; left: 0; z-index: -1;}
.site-content {prime: 50px; left: 50px;}
.site-footer {prime: 100px; left: 100px; z-index: 3;}

Based mostly on our data of z-index, we’d suppose that to make this yellow field seem above the pink field, we are able to simply set a better worth for z-index.

If I set z-index: 4, which is greater than z-index: 3 we see no change. It’s widespread for individuals to try to drive the stacking by making an attempt a very enormous quantity like 9999 however doing this has no impact both. Seeing z-index values like this peppered all through a codebase is a little bit of a code scent so try to keep away from it when you can.

The explanation that we’re not capable of get the specified results of the yellow field on prime of the pink field is because of how z-index behaves inside a stacking context.

So as to show this, let’s have a look at a barely extra concerned instance which I’ve borrowed from the MDN web site.

<header class="site-header blue">
<h1>Header</h1>
<code>place: relative;<br/>
z-index: 5;</code>
</header>

<important class="site-content pink">
<div class="box1 yellow">
<h1>Content material field 1</h1>
<code>place: relative;<br/>
z-index: 6;</code>
</div>

<h1>Important content material</h1>
<code>place: absolute;<br/>
z-index: 4;</code>

<div class="box2 yellow">
<h1>Content material field 2</h1>
<code>place: relative;<br/>
z-index: 1;</code>
</div>

<div class="box3 yellow">
<h1>Content material field 3</h1>
<code>place: absolute;<br/>
z-index: 3;</code>
</div>
</important>

<footer class="site-footer inexperienced">
<h1>Footer</h1>
<code>place: relative;<br/>
z-index: 2;</code>
</footer>
.blue {background: hsla(190,81%,67%,0.8); shade: #1c1c1c;}
.purple {background: hsla(261,100%,75%,0.8);}
.inexperienced {background: hsla(84,76%,53%,0.8); shade: #1c1c1c;}
.yellow {background: hsla(61,59%,66%,0.8); shade: #1c1c1c;}
.pink {background: hsla(329,58%,52%,0.8);}

header, footer, important, div {
place: relative;
border: 1px dashed #000;
}
h1 {
font: inherit;
font-weight: daring;
}
.site-header, .site-footer {
padding: 10px;
}
.site-header {
z-index: 5;
prime: -30px;
margin-bottom: 210px;
}
.site-footer {
z-index: 2;
}
.site-content {
z-index: 4;
opacity: 1;
place: absolute;
prime: 40px;
left: 180px;
width: 330px;
padding: 40px 20px 20px;
}
.box1 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
.box2 {
z-index: 1;
width: 400px;
margin-top: 15px;
padding: 5px 10px;
}
.box3 {
z-index: 3;
place: absolute;
prime: 20px;
left: 180px;
width: 150px;
peak: 250px;
padding-top: 125px;
text-align: heart;
}

Right here now we have a header, footer and important content material container as earlier than however contained in the site-content now we have three packing containers which have all been positioned and given a z-index.

Let’s have a look at the three major containers first – the header, footer and important.

The header has a z-index of 5 so seems stacked above the important content material which has z index: 4. The footer has a z-index of two so seems under the importantwith a better z-index of 4. All good to this point? Good.

Issues get a bit complicated with the three packing containers inside the important container.

Content material field 1 has a z-index of 6 however seems to be beneath the header with a decrease z-index of 5.

Content material field 2 has a z-index of 1 however seems above the footer which has a better z-index of two.

So, what’s happening?

All of this may be defined by the truth that all z-index values are resolved inside their guardian stacking context. As a result of the guardian container .site-content has a better z-index than the footer, any positioned components throughout the .site-content are evaluated inside that context.

A great way to consider stacking order inside a stacking context is to this of it like a sub-item in a nested ordered checklist.

This could possibly be written as follows:

  • Header: z-index: 5
  • Important: z-index: 4
    • Field 1: z-index: 4.6
    • Field 2: z-index: 4.1
    • Field 3: z-index: 4.3
  • Footer: z-index: 2

So despite the fact that, the header is z-index: 5 and content material field 1 is z-index: 6, it’s rendering order is 4.6 which continues to be lower than 5. As such, content material field 1 seems under the header.

It’s just a little complicated at first, however with follow, it does begin to make sense!

z-index solely works for positioned components

If you wish to management the stacking order of components, you are able to do so with z-index. However z-index will solely take have an effect on if the ingredient additionally has a place worth of absolute, relative or mounted.

Putting components exactly with place is nice for build up complicated layouts or fascinating UI patterns but it surely’s widespread to wish to management stacking order with out transferring the ingredient from its unique place on the web page.

If that is so, you may simply set place: relative however not present any values for prime, proper, backside or left. The ingredient will stay in its unique place on the web page, the doc circulation received’t be interrupted and z-index values will take impact.

You possibly can have damaging z-index

Layering components is usually performed to construct up complicated shapes or UI elements. This typically means layering components on prime of one another, with ever-increasing values of z-index. To position a component on a layer under one other one, it simply has to have a decrease worth of z-index however that decrease worth can be damaging.

One space the place that is helpful is when utilizing pseudo components and eager to place them behind the content material of their guardian ingredient.

Because of the approach stacking context works, a damaging worth of z-index is required on any :earlier than or :after components if they’re to be positioned behind the textual content content material of their guardian ingredient.

Check out the next Codepen and experiment with numerous values of z-index.

See the Pen GNgvxO by SitePoint (@SitePoint) on CodePen.

z-index technique

Let’s wrap up with a easy technique I take advantage of for making use of z-index all through a undertaking.

Earlier  we used single digit increments for z-index values however what when you wished so as to add a brand new ingredient between two which are set with z-index: 3 and z-index: 4? You’d have to alter loads of values – probably all through a complete codebase which may turn out to be problematic and liable to CSS breaking on different elements of the location.

Use steps of 100 for setting z-index

When coping with z-index, it’s not unusual to see code like this:

.modal {
z-index: 99999;
}

This simply seems hacky to me (and solely will get worse when appended with !essential). Seeing values like that is typically symptomatic of a developer not understanding stacking context and making an attempt to drive one layer to be on prime of one other.

As a substitute of utilizing arbitrary numbers like 9999 or 53 or 12, we are able to systemise our z-index scale and produce a bit extra order to proceedings. This isn’t (simply) as a result of I’ve developer OCD. Sincere.

As a substitute of utilizing single digit increments for my z-index, I take advantage of increments of 100.

.layer-one {z-index: 100;}
.layer-two {z-index: 200;}
.layer-three {z-index: 300;}

I do that to maintain issues organized, but additionally to be conscious of the quite a few completely different layers getting used all through a undertaking. One other profit is that if a brand new layer must be added between two others, there are 99 potential values to choose from in between.

When constructing a z-index system, this handbook method is fairly stable however could be made extra versatile when mixed with the powers of a pre-processor like Sass.

 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments