Identical CSS behaves differently when applied to either body or a div
- by Razor
Using a DIV as container
<div class="container">
<div class="half-hidden"></div>
</div>
CSS
.container {
margin: 20px auto 0;
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.half-hidden {
position: absolute;
top: 10px;
bottom: 10px;
left: -50px;
width: 100px;
border: 1px solid teal;
}
Using body as container
<div class="half-hidden"></div>
CSS
Replace the above .container with body
Why?
