Centering a Modal for IE9 with a transparent background, why need position relative?

Question

The back story.... I'm creating a modal directive for AngularJS that should take any** content and display it centered in the page with a grey transparent background. Sounds like it should be simple. It was working fine until testing w/ IE9 which is the only browser we need to support. Its an in-house site. I have a fiddler working with it centered both vertically and horizontally, that probably could be cleaned up a little. I'm assuming that its going to work, I'm on a mac right now.

The modal's html needs to be in the footer which is fixed to the bottom of the page. So

So I have two questions.

1st- When I was setting up the grey transparent background found that I needed so set the position as relative. Why is this needed? fiddler

.dialogbox-wrapper{
z-index:1000;
display: table-cell;
vertical-align: middle;
/* When this isnt included this has the opacity */
position:relative;

}

2nd- We are using less and CSS3. Is there a cleaner way?

Here's what I need -

Before anyone suggests !doctype HTML, its there.

Answer 1

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.