Why is the First DIV Div1 Still Visible When Giving it a Lower Z-Index Value than Div2?

Using z-index to superpose DIVs

This question explores the use of z-index to control the stacking order of DIV elements. The questioner attempts to superpose one DIV (div1) over another (div2) using z-index, but the desired effect is not achieved.

The provided code includes two DIV elements with different z-index values:

<code class="css">.div1 {
  z-index: 1;
}
.div2 {
  z-index: 2;
}</code>

Despite the higher z-index of div2, div1 remains visible in front of it. This is because the element's position is not explicitly set.

To resolve this issue, it is necessary to add position: relative to both divs. This creates a stacking context, allowing the elements to be positioned relative to each other. The updated code would be:

<code class="css">.div1 {
  z-index: 2;
  position: relative;
}
.div2 {
  z-index: 1;
  position: relative;
}</code>

With this modification, div1 will be correctly positioned above div2, as the z-index value takes precedence within the created stacking context.

The above is the detailed content of Why is the First DIV Div1 Still Visible When Giving it a Lower Z-Index Value than Div2?. For more information, please follow other related articles on the PHP Chinese website!