Css layer elements on top of each other

CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.

The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

Say you've got a couple of elements that are absolutely positioned, and are supposed to be positioned on top of each other. You might write a bit of a HTML like this:

    
Item 1
    
Item 2

But which one sits on top of the other, by default? To know which item would do that, you need to understand z-index and stacking contexts.

Z-index

The `z-index`property explicitly sets a layer order for HTML based on the 3D space of the browser—the Z axis. This is the axis which shows which layers are closer to and further from you. The vertical axis on the web is the Y axis and the horizontal axis is the X axis.

The z-index property accepts a numerical value which can be a positive or negative number. Elements will appear above another element if they have a higher z-index value. If no z-index is set on your elements then the default behaviour is that document source order dictates the Z axis. This means that elements further down the document sit on top of elements that appear before them.

In normal flow, if you set a specific value for z-index and it isn't working, you need to set the element's position value to anything other than

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

0. This is a common place where people struggle with z-index.

This isn't the case if you are in a flexbox or grid context, though, because you can modify the z-index of flex or grid items without adding

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

2.

Negative z-index

To set an element behind another element, add a negative value for z-index.

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

As long as

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

4 has the initial value for z-index of

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

6, the

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

7 element will sit behind it.

Add the following CSS to

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

4, and the

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

7 element will not sit behind it.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb[232 240 254 / 0.4];
}

Because

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

4 now has a position value that's not

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

0 and a z-index value that's not

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

6, it has created a new stacking context. This means that even if you set

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

7 to have a z-index of

.my-element {
  position: relative;
  z-index: 0;
  background: rgb[232 240 254 / 0.4];
}

7, it would still not sit behind

.my-element {
  position: relative;
  z-index: 0;
  background: rgb[232 240 254 / 0.4];
}

8.

Stacking context

A stacking context is a group of elements that have a common parent and move up and down the z axis together.

In this example, the first parent element has a z-index of

0, so creates a new stacking context. Its child element has a z-index of

2. Next to this parent, there is another parent element with one child. The parent has a z-index of

4 and the child element also has a z-index of

4. Because both parents create a stacking context, the z-index of all children is based on that of their parent.

The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context.

Creating a stacking context

You don't need to apply z-index and position to create a new stacking context. You can create a new stacking context by adding a value for properties which create a new composite layer such as `z-index`1, `z-index`2 and `z-index`3. You can see a full list of properties here.

To explain what a composite layer is, imagine a web page is a canvas. A browser takes your HTML and CSS and uses these to work out how big to make the canvas. It then paints the page on this canvas. If an element was to change—say, it changes position—the browser then has to go back and re-work out what to paint.

To help with performance, the browser creates new composite layers which are layered on top of the canvas. These are a bit like post-it notes: moving one around and changing it doesn't have a huge impact on the overall canvas. A new composite layer is created for elements with `z-index`1,`z-index`3 and `z-index`2 because these are very likely to change, so the browser makes sure that change is performant as possible by using the GPU to apply style adjustments.

Resources

• Forcing layers
• Understanding z-index

Check your understanding

Test your knowledge of z-index

Which article is on top by default?

4

Last in the document sits on top yep!

If z-index isn't working, what property should you inspect on your element?

`z-index`7

Not the likely property for why z-index isn't working.

`z-index`8

This is a CSS value, not a property.

position

Make sure this is set to something other than

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

0.

`z-index`1

Not the likely property for why z-index isn't working.

Do flexbox and grid need

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

2?

Yes

These display types don't need it.

No

Using z-index inside a flexbox or grid layout will work without

.my-element {
    background: rgb[232 240 254 / 0.4];
}
.my-element .child {
    position: relative;
    z-index: -1;
}

2.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2021-05-03 UTC.

[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]

How do I put two elements on top of each other in CSS?

Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.

How do I make an element appear above another in CSS?

In CSS, relative positioning can be used to move elements on top of each other. To do this, use the position: relative and z-index rules to specify the relative positions.

How do you make elements overlap each other in CSS?

Creating an overlay effect for two