CSS-隐藏屏幕右侧的元素

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>

添加位置:相对/固定/绝对; 到.outer (2认同)
注意：给定的代码将导致内部内容不显示在屏幕上。您需要根据需要在文档中定位外部 div，然后内部 `position: absolute` 将相对于外部 div。 (2认同)

Answer 2

只需添加overflow:hidden到CSS.这应该够了吧.

Answer 3

只需将此 div 插入另一个 div 中 overflow:hidden