overflow hidden body

by Yu Jiangshui

HTML

<div class="wrapper">
    <div class="section"></div>
    <div class="section section2"></div>
</div>


<p>body 的 overflow hidden 是无效的</p>
<p>wrapper 如果没有 relative ，子元素的 absolute 也无法 hidden</p>
<p>可以解除不同的注释查看效果</p>

CSS

body{
    width: 300px;
    border: 6px solid red;
    overflow: hidden;
    /* position: relative; */
}
.wrapper{
    /* position: relative; */
    /* border: 6px solid red; */
    /* overflow: hidden; */
    width: 300px;
    height: 200px;
}
.section{
    width: 300px;
    background: #aaa;
    height: 900px;
}
.section2{
    position: absolute;
    top: 0;
    left: 90%;
    height: 200px;
    background: #333;
    z-index: 10;
}