html - 如何设置溢出：隐藏；一个元素

Question

我有一个在页面上滑动的 div。我只是在玩 CSS 中的关键帧，试图了解它可以做什么。

我想让这个div充当窗帘，所以当它滑动时，它后面的一切都会改变。现在，当 div 超出用户可以看到的范围时，浏览器允许用户滚动查看所有内容。如何阻止用户看到该 ONE 元素的溢出？这是一个小提琴。

演示

代码：

<div class="content"></div>
<div class="hide"><div class="curtain"></div></div>

CSS：

body {
    }
    .hide {overflow: hidden;}
    .curtain {
        -webkit-animation:curtainMove 5s; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        margin-left: -2100px;
        margin-top: -300px;
        background-color: black;
        height: 2000px;
        width: 4000px;
        transform:rotate(50deg);
        -ms-transform:rotate(50deg); /* IE 9 */
        -webkit-transform:rotate(140deg); /* Safari and Chrome */
        z-index: 13;
        float: left;
        position:absolute;
    }
    @-webkit-keyframes curtainMove /* Safari and Chrome */{
    from {
        margin-left: -2500px;
        margin-top: -2500px;
    }
    to {
        margin-left: 600px;
        margin-top: 600px;
    }
}
    .content {
    background-color: #9F3;
    height: 1200px;
    width: 740px;
    margin-top: 75px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: 75px;
    position:absolute;
    z-index: 12;
    }

Answer 1

这是一个解决方案：http: //jsfiddle.net/Lvtr6/3/

<div class="hide">
    <div class="curtain"></div>
    <div class="content"></div>
</div>

.hide {
    overflow: hidden;
    position: relative;
}

然后删除position: absolute;以.content填充父级。鉴于必要的解决方案，您可能会考虑将您的 div 类重命名.hide为.outer.