I want the div1
to be above div2
. I try with z-index
but it does not work.
I\'ve tried this code:
The default property for div
is position:static
, Add position:relative
in both the div
then only z-index
will work.
z-index
only applies to elements with a position
other than static
, so for example: relative
, absolute
, or fixed
.
div {
width:100px;
height: 100px;
position:relative;
}
.div1 {
background: red;
z-index: 2;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 1
}
<div class="div1"></div>
<div class="div2"></div>
In many cases an element must be positioned for z-index
to work.
Indeed, applying position: relative
to the divs in the question would solve the z-index
problem.
Actually, position: fixed
, position: absolute
and position: sticky
will also enable z-index
, but those values also change the layout. With position: relative
the layout isn't disturbed.
Essentially, as long as the element isn't position: static
(the default value) it is considered positioned and z-index
will work.
Some answers here and in related questions assert that z-index
works only on positioned elements. As of CSS3, this is no longer true.
Elements that are flex items or grid items can use z-index
even when position
is static
.
From the specs:
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-index
values other thanauto
create a stacking context even ifposition
isstatic
.5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-index
values other thanauto
create a stacking context even ifposition
isstatic
.
Here's a demonstration of z-index
working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
You can add position: relative
to both divs and create stacking context
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
z-index: 2;
position: relative;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 1;
position: relative;
}
<div class="div1"></div>
<div class="div2"></div>
Or you could use transform-style: preserve-3d; so now .div1
should be positioned in the 3D-space and not flattened in the plane.
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
z-index: 2;
transform-style: preserve-3d;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 1;
}
<div class="div1"></div>
<div class="div2"></div>
You can also use some random transform like translate
or rotate
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
z-index: 2;
transform: translate(1px);
}
.div2 {
background: blue;
transform: translate(1px, -15vh);
z-index: 1;
}
<div class="div1"></div>
<div class="div2"></div>
Filters also work but they have bad Support
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
filter: brightness(0.4);
z-index: 2;
}
.div2 {
background: blue;
margin-top: -15vh;
filter: brightness(0.4);
z-index: 1;
}
<div class="div1"></div>
<div class="div2"></div>