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

Question

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

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

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

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/