如何隐藏屏幕边缘以外的元素? [英] How can I hide an element off the edge of the screen?

问题描述

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

I've got a div that I want to position partially off-screen like so:

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

但是，这会增加页面的大小，从而可以向右滚动页面.有什么办法可以隐藏此div的一半并防止滚动查看它?

But this increases the size of the page, allowing it to be scrolled to the right. Is there any way to keep half of this div hidden and prevent scrolling to view it?

推荐答案

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

Yes, just create an enclosing div with overflow: hidden, like this:

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

这篇关于如何隐藏屏幕边缘以外的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！