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

一尘不染

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

css

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

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

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

阅读 403

2020-05-16

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

2020-05-16