Menu
I am trying to understand the rules behind z-index and how it interacts with the overflow property.
I have this html:
<body> <div class="cell"> Here is some text to keep things interesting <div class="boxy"></div> </div> </body> And this css:
.boxy { position: absolute; z-index: 9999; top:70px; width: 50px; height: 50px; background: #0FF; } .cell { border: 2px solid #F00; position: relative; /* comment these two lines out and the box appears */ /* or change them both to 'visible' */ /* changing only one of them to 'visible' does not work */ overflow-y: auto; overflow-x: auto; } I would have expected that the cyan box appears even though it is out of the size of the div.cell because its z-index and its position are set.
However, the only way to make the cyan box appear is to comment out the overflow-x and -y lines.
My question is: How can I make the cyan box appear on the screen while keeping the overflow as either hidden or auto? But more importantly, I'm looking to understand why this is happening. What are the css and layout rules being applied here?
See my Plunkr. This example, is of course a much simplified version of the HTML/CSS I am actually working with.
EDIT There seems to be some confusion in the answers below because I didn't explain things well enough. If you comment the two overflow lines out, you can see that the cyan box appears. It appears outside of the border of .cell. Why does this happen? How can I make the cyan box appear, while still hiding overflow and z-index?
383
Possible fixes By default, Studio sets the z-index between 999999 - 1000000. If a site element must expand over an ad, ensure that its z-index is higher than that of the creative. If a site element must appear under an ad expansion, set its z-index at 999998 or lower.
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
Definition and Usage Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
The CSS overflow property controls what happens to content that is too big to fit into an area. This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content.
The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. overflow: visible simply means "paint this box even if it is overflowing its containing block" — the cell box is the containing block of the cyan box because its position is relative. Any other values of overflow cause overflowing content to be clipped from view. There is nothing special going on here; in particular, the z-index is completely irrelevant and there is no such interaction as the question title alludes to (and there really is no reason to set it to such a huge number unless you're worried about scripts injecting other elements into the cell).
The only way to allow the cyan box to appear while the cell has a non-visible overflow is to remove position: relative from the cell and apply that declaration to the parent of the cell (in your example, it's the body). Like this:
body { position: relative; } .boxy { position: absolute; z-index: 9999; top: 70px; width: 50px; height: 50px; background: #0FF; } .cell { border: 2px solid #F00; overflow: auto; }<div class="cell"> Here is some text to keep things interesting <div class="boxy"></div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
