CSS-隐藏元素在屏幕的右边 [英] CSS- hide element off the right 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>

我忘记将位置：相对添加到Alex Ackerman指定的.outer div

I forgot to add the position: relative to the .outer div as pointed by Alex Ackerman

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

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