As to #1
For z-index
to be honored, an element must have position
of some kind. If position: relative
is simply removed, then the default static
position does not recognize the z-index: 1000
and so the gray box's z-index: 50
puts your "background" to the foreground.
As to #2
"Cleaner" can be so relative. Here is a modified version of your fiddle that centers it without the need for the min-width
(which you expressed in your notations wanting to eliminate), by using display: inline-block
with the container set to text-align: center
(which is reset on the element itself). It also sets the <a>
element for the "close" to display: block
so that your width: 200px
actually does something (an anchor is an inline element normally, which does not honor width). Of course, now 200px
for the .row
is driving the width of the modal display.
It all works in IE9 for me.