div overlap in IE 11 blocks events

Question

When I have overlapping divs in IE 11, the 1st div with a radio button in it is blocked from receiving any mouse events by the 2nd overlapping div, so I cannot click on the radio buttons! See simplified example of the code I'm using:

<div>
<div style="display: block; border: solid 1px blue;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked"><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio"><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
</div>

<div style="margin-top: -23px; display: inline-block; border: solid 1px red;">                  
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div></div>

And in JSFiddle: http://jsfiddle.net/yW6kp/1/.

I need these to overlap, but also need the events on the radiobutton to happen as well. I can achieve this by using display: block on the second div instead of display: inline-block, but then they do not overlap. This does not happen in IE 10 or in IE 11 compatibility mode. Can anyone explain what's up

Josh Powell · Accepted Answer · 2013-11-14T22:48:48.330

3

First let me explain why this is happening, You have a div without a background color but it is still a block element. Imagine you have a snickers bar, mmmm, that you trapped between two layers of glass.

You may be able to see that yummy snickers bar but you are going to have some trouble sticking your hand through a solid object to get it.

Same thing applies to the input tag. It is being trapped between 2 layers, one of which is its parent. They may have no background but that does not make its background open to go through.

Here is how the html looks,

<div>
<div style="display: block; border: solid 1px blue;height: 35px;">

</div>

<div style="margin-top: -25px; display: inline-block; border: solid 1px red;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked" /><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio" /><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

Here is a jsfiddle to see how it works, fiddle.

edited Nov 14 '13 at 22:48

answered Nov 14 '13 at 21:47

Josh Powell

6,219
5
31
59

Josh,Thanks for the reply, and I found the analogy humorous but it misses the root of the problem. My previous code works in IE 10, but not 11. The problem is with the display type, inline-block. See a better example of what I mean here: http://jsfiddle.net/yW6kp/4/ – JSHorn Nov 14 '13 at 22:40
Okay I see what you are asking. I will look this up real quickly but, based on my knowledge, IE has a lot of problems. Since it did not work in Chrome or Firefox I would say this is an error of IE 10 and got corrected in IE 11. Let me check real quickly. – Josh Powell Nov 14 '13 at 22:48
You are probably correct in saying it was wrong in IE 10, and possibly fixed in IE 11. Also, if this is a layering issue, why does z-index not have any effect? Does z-index have no effect on inline-block elements? – JSHorn Nov 14 '13 at 22:50
Here is a good read on what you should do, http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements. – Josh Powell Nov 14 '13 at 22:54
Are you elements positioned with `relative`, `absolute`, or `fixed`? `Z-index` only works on positioned elements. – Josh Powell Nov 14 '13 at 22:54
Not sure I like the pointer-events since it seems it may not be cross-browser compliant. I went with an idea from your last post about making both elements have position: relative, then setting z-index on the second element to -1: See here: http://jsfiddle.net/yW6kp/5/. Thanks for all of your help! – JSHorn Nov 14 '13 at 23:02
No problem! In that link there is a way to have it cross-browser compatible with the use of css. Best of luck! – Josh Powell Nov 14 '13 at 23:11
@JSHorn - IE 10 and earlier would allow "clicks" on elements behind "block" elements that had a fully transparent background. In IE 11 this seems to be fixed. There has always been a hack in IE 10 and below to set the background to a almost transparent color to ensure clicks did not pass through. – Dan Feb 12 '14 at 02:14

score 3 · Answer 2 · answered Jan 17 '14 at 14:22

Why don't you just add

pointer-events:none;

to your second div? like (using your code)

<div>
<div style="display: block; border: solid 1px blue;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked"><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio"><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
</div>

<div style="margin-top: -23px; display: inline-block; pointer-events:none; border: solid 1px red;">                 
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

using that you can click through the other div all day long.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Internet Explorer 11 appears to be handling this issue identical to the way Firefox and Chrome handle it. I've modified your code just a bit to illustrate what is happening, and why you cannot click the radio button when your inline-block element is moved up over its neighboring input fields.

enter image description here

In the first example, we see the input elements themselves appear behind the inline-block element, making them inaccessible from within the border of the the red element. They do, however, peek out from behind the red element, giving us the ability to click the top-half of the input element.

The contrast, the bottom example shows the results of changing out second element from inline-block, to block. In this example, the input elements appear above the block-level element. This is more similar to the way IE10 handled the example, it appears.

As to what the distinction is between the two, I'm not entirely sure. It may be that this is caused by atomic inline-level boxes, which contribute to the inline-formatting of their host, as well as having inline-formatting within themselves. Block elements do not do this.

Solution

The solution to this issue is to avoid overlapping forms with other elements, which is generally a bad practice. Alternatively, you can give both containers relative positioning, and a higher z-index to the container hosting our form. This lifts the element, and all of its contents, up above the red-box.

.box {
    position: relative;
}

.higher {
    z-index: 1;
}

<div class="box higher"><!-- inputs --></div>
<div class="box"><!-- text --></div>

Which would result in something like the following:

enter image description here

I've made these changes available in a modified fiddle that you are more than welcome to explore. Please let me know if there is any way I can help explore this issue further.

Fiddle: http://jsfiddle.net/yW6kp/11/show/

div overlap in IE 11 blocks events

3 Answers3

Solution