kutomer kutomer - 5 months ago 9
CSS Question

Div inside button not working as expected in IE

I want to position an absolute

<div>
element inside a
<button>
, the element needs to be slightly out of the button bounds, as follows:

HTML:

<button class="container">
<div class="child">child</div>
</button>


CSS:

.container {
position: relative;
}
.child {
position: absolute;
top: -1rem;
left: 1rem;
}


This works exactly as I expect in Chrome, but in IE the child doesn't get out of the button boundaries, This is the fiddle.

Chrome:

chrome

IE

IE

Tested in IE 11 and Chrome 51.

Answer