We want to have a floating Pop Up window, which loads up when X happens on the page.
With the Window having opaque (see through) window. All is working but 2 things, as you can see here in this sample page:
1- The background opaque (see through) window is not centered on the screen, that is it not equal distance from left and right side of the scree.
2- A DIV which we use for navigational buttons is standing in front of the floating Window. That is those buttons on the right with “About Us”, etc. on them
Thanks. Your suggestion works prefect regarding 1st issue.
However, for 2nd issue we cannot set the dropdown.css to z-index: -1; since by when not covered by the opaque window, which is 99% of the time, we want to have the given z-index. So is there anyway to have the opaque window folating on top of everything below it?
Yes, that z-index of Navigational items is crazy high!
I guess guys who did that either paid no attention as to the real reason behind this value or did not really know about how to set that value right so they just picked a crazy (relatively speaking) high number.
And about content spills on smaller screens, do you means screens of a Mobile phone? If yes, these pages are not designed for Mobile phones per say.
If you think of the webpage as having layers, the higher the z-index, the higher the element is in the pile of layers. So an element with z-index of 10 will sit on top an element with z-index of 5, etc.
Sometimes a developer will give an element a ‘crazy-high’ z-index to make sure that element does not get covered up with other elements with higher z-indexes by mistake.