0

I would like to know why display:grid and display: block affect how children elements stack each other?

In my code below, one outter container, two inner children. .absolute-position is absolute positioned while .container is relative positioned.

Even if setting z-index: 10000 on .blocked not able to raise it up which is different from display: block on container.

const container = document.querySelector(".container");

function toggle(){
  container.classList.toggle("grid");
}
.absolute-position {
  position: absolute;
  background: white;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}

.grid {
  display: grid;
}
  
.container {
  width: 100px;
  height: 100px;
  background: burlywood;
  position: relative;
}

.blocked {
  background: #a1c572;
  z-index: 10000;
}
<div class="container grid">
  <div class="absolute-position"></div>
  <div class="blocked">abc</div>
</div>

<button onclick="toggle()">Toggle</button>
krave
  • 1,629
  • 4
  • 17
  • 36
  • 2
    `z-index` has no effect on elements until they have a `position` setting of anything *other* than `static`. `.blocked` is NOT positioned relative. – Paulie_D Oct 24 '19 at 08:25
  • @Paulie_D I have corrected problem description. Sorry for that. But what you said about z-index is not true. When container is `display: grid`, z-index affects `.blocked`. You can verify that from my code by removing `z-index: 10000` from the code. – krave Oct 24 '19 at 08:33
  • 1
    you have your answer, grid-items obey to z-index . normal items don't unless they are positioned like said by @Paulie_D (check all the answer of the duplicate) – Temani Afif Oct 24 '19 at 09:11

1 Answers1

1

If I understood it right, try this:

I added this to .blocked:

position: sticky;

The entire code:

const container = document.querySelector(".container");

function toggle(){
  container.classList.toggle("grid");
}
.absolute-position {
  position: absolute;
  background: white;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}

.grid {
  display: grid;
}
  
.container {
  width: 100px;
  height: 100px;
  background: burlywood;
  position: relative;
}

.blocked {
  background: #a1c572;
  z-index: 10000;
  position: sticky;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container grid">
  <div class="absolute-position"></div>
  <div class="blocked">abc</div>
</div>

<button onclick="toggle()">Toggle</button>
Gogo Dev
  • 123
  • 13
  • 1
    It turns out that no matter what is being set as position value except `static`, stack order of children elements will retain. Main concern is why `display: grid` matters. – krave Oct 24 '19 at 08:38
  • @krave I tried it with absolute or fixed as well, but it didn't work. I guess when you use sticky with toggle, it works just great. About the `display:grid` though, here might be the explanation you were looking for: [link](https://webdesign.tutsplus.com/tutorials/the-quirks-of-css-grid-and-absolute-positioning--cms-31437). – Gogo Dev Oct 24 '19 at 08:44