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

Question

我有一个 div，我想将其部分放置在屏幕外，如下所示：

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

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

原文由 lavelle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 .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>

示例：http: //jsfiddle.net/Uj3eQ/

原文由 jackJoe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只需将 overflow:hidden 添加到 css。这应该够了吧。

原文由 Aaditi Sharma 发布，翻译遵循 CC BY-SA 3.0 许可协议