1

I have a constraint: these 2 parent divs cannot be "one is higher than the other", they are both equal in importance.

I have 2 main divs, they're both z-index: 2. Inside the first div, I have a child whose z-index is 99999, now, because both relative and static are treated by the browser in a first-come-last-important fashion, that is to say, div2 has a higher order than div1, my absolute child inside div1 will be behind div2. Watch:

#item1 {
  width: 100%;
  height: 200px;
  background-color: gray;
  position: relative;
  z-index: 2;
}

#child {
  position: absolute;
  bottom: -15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  z-index: 15;
}

#item2 {
  width: 100%;
  height: 200px;
  background-color: green;
  position: relative;
  z-index: 2;
}
<div id="item1">
  <div id="child">
  </div>
</div>
<div id="item2">
</div>

What am I missing here? The web is supposedly full of divs that are relative and come one after another and they have absolute divs inside of them.

Daniel M
  • 61
  • 1
  • 8
  • I don't think a child element can have a higher z-index than its parent. Try making div1 z-index 3. – Sydney Y Feb 14 '20 at 05:48
  • Read this: https://stackoverflow.com/a/54903621/9787887, and this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context. The keyword is **stacking context** – Loi Nguyen Huynh Feb 14 '20 at 05:49
  • 1
    @LoiNguyenHuynh So, if I am to understand all that correctly, I just hit a paradox inside my head. There's no way one item isn't higher order than the other. There's no such thing as "equal levels" and one item will always be higher than the other -- the question then is, which one do I, as a developer, decide to be of higher importance in terms of view. Right? – Daniel M Feb 14 '20 at 05:53
  • Yet there's something called [painting order](https://www.w3.org/TR/css-position-3/#painting-order). If elements are not overlapped each other, maybe they're painted at the same time (or "equal levels" as you said). If they're overlapped, the one being painted after will have more "importance in terms of view" than the one being painted in advance. – Loi Nguyen Huynh Feb 14 '20 at 06:01
  • @LoiNguyenHuynh Well, sure, but I'm talking about 2 normal divs, either `static` or `relative` with the same `z-index`. The one further in the DOM is given paint priority, yes? Past this, there's the items that could trigger a re-build of that order, but if we're just taking that basic example, that's how it works. – Daniel M Feb 14 '20 at 06:04
  • `z-index` will not take effect if the element doesn't have a `position` attribute different than `static`. `position: static; z-index: 9999;` means nothing. https://stackoverflow.com/questions/8486475/why-is-z-index-ignored-with-positionstatic https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning – Loi Nguyen Huynh Feb 14 '20 at 06:11
  • read the accepted answer of the duplicate to understand your issue and at the end to find workarounds – Temani Afif Feb 14 '20 at 08:53
  • @TemaniAfif Very, very thoughtful and I ended up learning a lot. I never knew that insertion order is pretty much stacking index if we are talking about the same context (because 2 divs that are relative and have the same z-index are in the same context, much like 2 divs that aren't relative are still in the same context). – Daniel M Feb 14 '20 at 10:11

2 Answers2

1

Increase z-index of parent item (#item1) or remove z-index from both parent. It will work.

Actually you don't need to use z-index in parent elements, if you need to use z-index then give first parent higher, Browser give higher priority(z-index) on second element than first because browsers need to show 2nd element over first element.

#item1 {
  width: 100%;
  height: 200px;
  background-color: gray;
  position: relative;
}

#child {
  position: absolute;
  bottom: -15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  z-index: 15;
}

#item2 {
  width: 100%;
  height: 200px;
  background-color: green;
  position: relative;
}
<div id="item1">
  <div id="child">
  </div>
</div>
<div id="item2">
</div>
Delowar Hosain
  • 2,214
  • 4
  • 18
  • 35
0
enter code here


#item1 {
  width: 100%;
  height: 200px;
  background-color: gray;
  position: relative;
  z-index: 2;
}

#child {
  position: absolute;
  top: -15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  z-index: 9999;
}

#item2 {
  width: 100%;
  height: 200px;
  background-color: green;
  position: relative;
  z-index: 2;
}
<div id="item1">
  
</div>
<div id="item2">
  <div id="child">
  </div>
</div>
Devendra Prajapati
  • 1
  • 2