Z-index in Grid Layout

Hello everyone, I am Berkay and this is my first blog ever. Actually I am a chemical engineer who graduated at 2021. I enjoy while coding and seeing my code results. Therefore, I am trying to change my path from chemical engineer to Front-end developer. I just finished my HTML and CSS course from Udemy platform. I mean, I am at the beginning of the road :) In this blog, I’ll try to explain z-index in the grid element and items. I am writing this blog because I have had a problem about this z-index in grid layout while dealing with nested elements :) I hope when you read this, you’ll not have a problem. Actually, I am so beginner in front-end programming. Read this blog by taking into consideration of my beginning path :) Have a good reading….

Let’s look at the below html structure, and try to understand.

<div class="container">
  <div class="a-box"></div>
  <div class="b-box">
    <div class="c-box">
      <div class="child-box">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>

Now let’s add some CSS, and see what is the actual preview

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.container {
  position: relative;
  background: red;
  width: 400px;
  height: 400px;
}
 
.a-box {
  background: green;
  width: 175px;
  height: 175px;
}
.b-box {
  background: black;
  width: 150px;
  height: 150px;
}
 
.c-box {
  background: purple;
  width: 120px;
  height: 120px;
}
 
.child-box {
  background: orange;
  width: 100px;
  height: 100px;
}

And …. See the actual preview of these HTML and CSS.

“Box-a” pushes the “box-b” since they are sibling. “Box-b” covers the “box-c” and its child because “box-b” is the parent of these.

What if, I give an absolute position to “box-a” ?? Let’s try, and see…

Booom !!! When I give an absolute position to “box-a”, it gains a different dimension than other elements inside the container, and other elements(except “box-a”) pretend like there is no more “box-a”, and try to go at the first line in the container. It seems pretty :) …..

Note that, in order apply z-index property, element must have a position rather than static.

Now let’s give an absolute position value for “b-box” also, and see.

Opsss !!! Now “box”-a goes to underneath of the “box-b”. The reason for that, “Stacking-order”. Briefly, if you have positioned elements, the last element will be seem at the top. You can change this situation by changing the z-index property. If you want to read more about stacking order, look at this reference [Ref1].

The reason why I am writing this blog is ;

Let me explain my situation to be a well-understandable. Think that my “box-a” will pretend like an overlay which covers the “box-b” and its child. Therefore, I am giving box-a an opacity value. Also, I want “box-b” to be a grid element in order to positioned its child according to my desire. Look at below to see CSS. I only add display grid to b-box, and opacity value for “box-a”.

I want my “c-box” and ‘Hello’ type to be distinguished. Therefore, I am giving z-index=1 to “b-box”.

Immm looks weird, nothing is changed. Now, let me try to give a z-index value to “box-c” instead of “box-b”,

Finally, I got it :)) This is what I want to be see. Although, “box-b” covers the “box-c” and its child, nothing is changed when I give a z-index for box-b. Let me explain the reason.

Reason of that situation:

• When I give a display=grid for “box-b”, box-b is called a **grid element**, and it gains a different dimension.
• However, its child (“box-c”) is called a grid item which can be positioned. Since it has a position property I can apply it a z-index value.

REFERENCE

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