z-index for the nested div

Question

I expect to get this result:
https://ibb.co/htJD6J
In my styles I've set to the parent position relative; z-index 50. For the child I've set position absolute; z-index 25. But as a result, I've got this.
https://ibb.co/cwhjDy
P.S. Sorry, not enough reputation to post images. So, I can't understand why z-index isn't worked correctly. Can anybody help me with it?

Add code: parent

.sel_project_block {
 background-color: #f5876e;
 border-radius: 14px;
 margin-right: 150px;
 width: 239px;
 height: 34px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 position: relative;
 box-shadow: 1px 3px 7px #000;
 z-index: 5;
}

child

.additional {
 max-width: 185px;
 position: absolute;
 top: 76.2%;
 right: 22.05%;
 z-index: 1;
 color: #67573e;
 background-color: #fff;
 border: 1px solid #978d7e;
 font-size: 16px;
 width: 185px;
}

change position to absolute and add negative z index, margin as needed — karthik, May 16 '18 at 15:23
karthik, if you can see - I use relative/absolute position and z-indexes, but the not work. — Valerii Voronkov, May 16 '18 at 15:34

score 0 · Answer 1 · answered May 16 '18 at 15:36

Setting position: anything-that-is-not-static establishes a new stacking context.

The position of the child element is with respect to the parent (that is position: relative).

So if you want it to appear behind the parent, you have to give it a negative z-index.

SOUPaLOOP · Answer 2 · 2018-05-16T15:51:19.007

0

Since div#child is a child element of div#parent, and since div#parent establishes a stacking context (because it has an integer z-index value), you can't put div#parent on top of div#child by increasing its z-index

The z-index you set for div#child is within the context of div#parent. So if you want div#child to appear below div#parent you need to set a negative z-index for div#child.

in the future - if you post code to accompany your question the answers would be easier to understand. (also, properly asking a question will yield better results as well)

edited May 16 '18 at 15:51

answered May 16 '18 at 15:37

SOUPaLOOP

121
7

but what?? I'm confused at what you are getting at here – SOUPaLOOP May 16 '18 at 15:50

score 0 · Accepted Answer · answered May 16 '18 at 15:49

Because the .child is relative to its .parent, so does its z-index.

You can do away with this by removing the z-index of the parent:

.sel_project_block {
  background-color: #f5876e;
  border-radius: 14px;
  margin-right: 150px;
  width: 239px;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  box-shadow: 1px 3px 7px #000;
}

.additional {
  height: 50px;
  max-width: 185px;
  position: absolute;
  top: 76.2%;
  right: 22.05%;
  z-index: -1;
  color: #67573e;
  background-color: #fff;
  border: 1px solid #978d7e;
  font-size: 16px;
  width: 185px;
}

<div class="sel_project_block">
  <div class="additional"></div>
</div>

I'll try it and answer you next day. Tnx. – Valerii Voronkov May 16 '18 at 18:33 — Valerii Voronkov, May 16 '18 at 18:33

score 0 · Answer 4 · answered May 17 '18 at 13:17

Ok, colleagues. After a few hours, I solve my problems. What I'd done: at first, I added new wrapper and put all blocks include parent and child in it. at second, I added to the wrapper block z-index = 3; and set to the dropdown block z-index = -1. It seems in pug:

.dropdownWrapper
 .sel_project_block
 .sel_project_block__proj
   span New Project
.sel_project_block__imgWrapper(@click="showDropdown")
  img(src="../assets/images/white-arrow.png")
.clientsTop__dropdown
.additional(v-if="dropdownVisible")
.first {{ newProject.trans }}

...

and scss code:

.dropdownWrapper {
height: 34px;
width: 239px;
margin-right: 50px;
z-index: 3;
position: relative;

.sel_project_block {
  ...
}

.clientsTop__dropdown {
  z-index: -1;
  position: absolute;
  top: 59.2%;
  right: 13.8%;
...

  .additional {
    ...
  }
}

}

z-index for the nested div

4 Answers4