scroll down to middle of the page. See the section that has heading: Only 1
Now hold your mouse over the More button there. You will see that the window that Pops up
has the More button from panel next to it bleeding through!
Why is that? What is the solution to stop this?
Now it gets even stranger: if you hold your Mouse over the More button of 3rd panel that 2nd panel More button does not bleed through!
Removing the z-index: 0; on .more_box fixes the issue for me. There are many ways to solve your z-index issue but I don’t notice any adverse effects from this fix .
Yes that did solve the problem!
But why should have z-index: 0; on more_box class should have caused it to bleed through
DIV more_info_right which had z-index: 300; ???
That makes No sense!
But My Hat off to you for seeing the solution so quickly
When you apply a z-index to a parent (other than auto) then the element immediately becomes ‘atomic’ in the sense that all its children are bound by the z-index of the parent (in your case zero).
That means that any children of that element cannot overlap any elements oustide of this current context that have a z-index of zero or greater (elements of the same z-index will overlap previous elements of the same rank).
If you remove the z-index from the parent (or apply auto as that is the default) then the children are no longer contained by the parents z-index and will overlap other elements assuming the criteria mentioned above is met.
To recap: When you set z-index on a parent (other than auto) all the children become grouped to that parents z-index. You can reorder the stacking of the children within that group but not with anything outside that group.
Hum! That is really twisted logic. How/where did they ever document all these fine grain details!
How do you know them to such detail! But Bravo that you do.
.