IE10 html5 with doctype and z-index

StackOverflow https://stackoverflow.com/questions/18575210

Question

I have this sample: http://jsfiddle.net/z5BCm/ It's a div which contain 2 divs inside and one of them is a table with a specific size (500x500 for example) and high zIndex (9998) and the other div have a input text inside with low zIndex. The question is: Why in the IE10 am i able to access the input if the table zindex cover all over it ? It works correctly on Google Chrome, Firefox, Safari and so on..

<!DOCTYPE html>
<html>

    <head></head>

    <body>
        <div style="width:100%; height:100%">
            <div style="left: 0px; top: 0px; width: 663px; height: 574px; display: block; position: absolute; z-index: 99998;">
                <table width="100%" height="100%">
                    <tbody>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="left: 11px; top: 27px; width: 110px; height: 36px; display: block; position: absolute; z-index: 0;">
                <div style="left: 0px; top: -15px; height: 15px; display: block; position: absolute; z-index: 2;"><font class="label" style="white-space: nowrap; cursor: default;" draggable="false"><strong>Login</strong><strong style="color: rgb(255, 0, 0);">&nbsp;*</strong></font>
                </div>
                <div style="left: 0px; top: 0px; width: 110px; height: 21px; display: block; position: absolute; z-index: 2;">
                    <input name="WFRInput100000005" class="edit" style="z-index:1;width: 110px; height: 21px; text-decoration: none; background-color: rgb(255, 255, 255);" type="text" maxlength="20" autocomplete="on">
                </div>
            </div>
        </div>
    </body>
Was it helpful?

Solution

And old question, I know, but I just ran into this myself. The issue is IE's tendency to ignore transparent elements (see this SO for more details). I was able to hack a fix on your fiddle by adding a white background color (with opacity set to 0) to the table's parent div.

Here's the updated fiddle: http://jsfiddle.net/z5BCm/1/ Specifically, here's what changed:

        <div style="left: 0px; top: 0px; width: 663px; height: 574px; display: block; position: absolute; z-index: 99998; background-color: white; opacity:0;">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top