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/

Answer 2

只需将overflow:hidden添加到css即可。这应该可以解决问题。

Answer 3

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

的div中

Answer 4

您可以添加媒体查询以避免在某个点滚动。所以基本上采用主容器的宽度并使用它创建一个最小宽度的媒体查询。

@media (min-width: 960px) {
    body {
       overflow-x: hidden;
    }
}

适用于现代浏览器。

Answer 5

另一种解决方案是使用margin-left: 100%;

如果您想稍微使用定位，可以执行margin-left: calc(100% + 10px);

之类的操作

另一种替代方法是float: right;，然后玩margin-right -50px;，其中50px是隐藏div的宽度。如果您在制作菜单时为margin-right设置动画，则甚至可以进行整洁的过渡。

Answer 6

我有类似的情况，我需要一个绝对放置的元素部分位于主内容标题的右侧。如果浏览器的宽度足以显示它，我不想剪辑它（溢出：隐藏;）但如果浏览器不够宽，我也不想让滚动条出现。

以下是我使用的代码：

@media screen and (max-width: 1275px) {
  #header {
     overflow-x: hidden;
  }
}

Answer 7

滚动可能是你已经将相对位置属性放置到包含div并且它导致所需的div向右偏离-50但是相对于包含主要div而不是浏览器可视区域..如果它的父div只是在body标签内或父div不包含你的代码应该工作的任何位置属性..再次你可以应用overflow：hidden属性来包装div来隐藏不必要的部分

CSS-隐藏屏幕右侧的元素

7 个答案: