Why is overflow interacting with z-index?
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