4

In this example, is there any way to make Div #4, Div #5, and Div #6 higher than Div #1? I've read that z-index only applies to elements within the same stacking context. So here, Div 4,5, and 6 are within the stacking context of Div #3.

In another example, as shown here, and change the main div left property to something like 10%, the child element is being overlapped by the body element.

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 10%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

Is there any way for them to overlap other elements in 'higher' stacking contexts?

Cary Meskell
  • 312
  • 2
  • 10
  • The example you just added has nothing to do with `z-index` or stacking contexts. Change `overflow:auto` on `main` to `overflow:visible`. [Updated pen](http://codepen.io/anon/pen/OWoWvW) – tao Feb 08 '17 at 00:39

1 Answers1

0

Give #2 a z-index higher or equal with #1's and any position value, except static. (If you change #2's z-index to 5, it will make all children of #2 render above #1.)

More on z-index and stacking contexts here. I also made a toy (snippet) there that can be used to dynamically cycle through different z-index values in a stack so you can visualize what happens.

Another way of making children of #2 render above #1 would be to set position:static on #1. This way its z-index will no longer apply.

Community
  • 1
  • 1
tao
  • 82,996
  • 16
  • 114
  • 150
  • 1
    I think I may have made the question a little unclear. I'm already aware Div#2 can be above Div#1, they're in the same stacking context. So in the example above, is there any way for Div 4,5 and 6 to render above Div #1 seeing as Div#1 is in a 'higher' stacking context then Div 4, 5, and 6?? – Cary Meskell Feb 08 '17 at 00:12
  • If both `#1` and `#2` have positive values of `z-index` and `#1` is higher than `#2` and they both have values of `position` other than `static`, then ***no***. All the children of `#2` are in a `z-index` "bubble" at their parent's `z-index`. – tao Feb 08 '17 at 00:15
  • So, a dirty way of doing it is setting `position:static` on `#1` - (updated the answer). – tao Feb 08 '17 at 00:19
  • The question has nothing to do with the div `#2` ! please read the question carefully. It is about `#1` and `#3`. – Farzad M. Jul 29 '20 at 05:33