Kevin Powell - Community•2mo ago

Nested stacking context using z-index

Hello guys, sorry to disturb you all; normally, when we have a nested stacking context, the child element shouldn't be always below the parent element stacking order even though it has a greater z-index?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/test.css" />
    <title>Stacking context</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2">
      <div class="box3"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/test.css" />
    <title>Stacking context</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2">
      <div class="box3"></div>
    </div>
  </body>
</html>

*, *::after, *::before{
    box-sizing: border-box;
}

body{
    margin: 0;
    min-height: 100svh;
    height: 100vh;
}

.box1 {
    width: 200px;
    height: 100px;
    background-color: violet;
    position: relative;
    top: 20px;
    z-index: 1;
}

.box2 {
    width: 200px;
    height: 100px;
    background-color: hsl(240, 66%, 63%);
    position: relative;
    bottom: 10px;
    z-index: 2;
}

.box3 {
    width: 200px;
    height: 100px;
    background-color: hsl(0, 84%, 66%);
    position: relative;
    left: 20px;
    bottom: 30px;
    z-index: 3;
}

*, *::after, *::before{
    box-sizing: border-box;
}

body{
    margin: 0;
    min-height: 100svh;
    height: 100vh;
}

.box1 {
    width: 200px;
    height: 100px;
    background-color: violet;
    position: relative;
    top: 20px;
    z-index: 1;
}

.box2 {
    width: 200px;
    height: 100px;
    background-color: hsl(240, 66%, 63%);
    position: relative;
    bottom: 10px;
    z-index: 2;
}

.box3 {
    width: 200px;
    height: 100px;
    background-color: hsl(0, 84%, 66%);
    position: relative;
    left: 20px;
    bottom: 30px;
    z-index: 3;
}

In the uploaded picture, why is box3 (the box with the tomato-like color) stacked over its parent element, the blue-like color

5 Replies

capt_uhu•2mo ago

It's the default behavior of a child to be in front of it's parent. Note that if you remove the z-index from all of the elements there is no change at all to the stacking order.

FakerOP•2mo ago

if I remove the z-index, even I remove the position property, then the stacking order is based on the document flow? The last element being defined will be above? Hmmm I think in the video I watched, the child was always below its parent, I need to have a look

capt_uhu•2mo ago

yep, the blue box will be in front by default because it's lower down in the html. And the red box will be infront of the pink because it is a child of the blue. this is the article on z-index that made things click the most for me. In all honestly, must admit to having being pretty confused by z-index and stacking contexts for much longer than I'd like to admit. I think this is kind of a universal thing.

capt_uhu•2mo ago

https://coder-coder.com/z-index-isnt-working/

Jessica Chan

Coder Coder

4 reasons your z-index isn't working (and how to fix it) - Coder Coder

Z-index is one of those CSS properties that causes a ton of frustration due to some strange rules. Learn just how z-index works and avoid common pitfalls.

FakerOP•2mo ago

I will have a look, thanks !

Gaming

Programming

Nested stacking context using z-index