如何隐藏屏幕边缘以外的元素？

Question

我有一个div，我希望将其部分定位在屏幕外，如下所示：

div{
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
    top: 50px;
}

但这会增加页面的大小，使其可以向右滚动。有什么办法可以使该div的一半隐藏并防止滚动查看它？

Answer 1

是的，只需使用创建一个封闭的div overflow: hidden，如下所示：

.outer {

  overflow: hidden;

  position: relative;

}

.inner {

  position: absolute;

  height: 100px;

  width: 100px;

  right: -50px;

  top: 50px;

}


<div class="outer">

  <div class="inner">

    CONTENT

  </div>

</div>