Question

我正在寻找一种在另一个内部使用固定div的方法，在没有水平滚动的情况下，其中一部分超过了它。

HTML：

<div id="global">
    <div id="inner"></div>
</div>

的CSS：

#global{
    margin: 0px auto;
    width: 300px;
    height: 300px;
    position:relative;
    top: 0px;
    background-color: #ff0000;
}
#inner{
    width:100px;
    height: 100px;
    position: absolute;
    background-color: black;
    right: -50px;
    top: -50px;
}

黑色div位于红色div中，但在我的项目中，红色div实际上是我网站的外部容器，并且是1024px大，所以当浏览器窗口我不想要这个丑陋的水平滚动是1024px大，但只是想要这个＆＃34;外面＆＃34;隐藏黑色div的一部分。

我试图通过设置溢出参数来解决这个问题，甚至试图将这个黑色div放在一个固定或绝对的位置，但我找不到更好的结果...

Answer 1

在这种情况下，

#global{overflow: hidden;}对我来说很好用

Answer 2

正如评论中提到的SW4一样，将overflow: hidden;添加到CSS中的父div global属性中。

Answer 3

在您的容器（overflow:hidden;）上放置#global即可完成工作。

Answer 4

不确定我是否正确理解了您的问题，但请尝试将其放入样式表中：

html{overflow-x:hidden;}

这应该可以解决问题。请记住，这对于屏幕较小或放大浏览器窗口的人来说并不友好。

Answer 5

我终于找到了一个很好的解决方案（我认为）来解决我的问题：

HTML：

<div id="inner"></div>
<div id="global">
</div>

的CSS：

#global{
    margin: 0px auto;
    width: 300px;
    height: 300px;
    position:relative;
    top: 0px;
    background-color: #ff0000;
    z-index: -1;
}
#inner{
    width:100px;
    height: 100px;
    position: relative;
    background-color: black;
    margin: auto;
    z-index: 2;
    left: 150px;
    top: 50px;
}

这是更新的小提琴：http://jsfiddle.net/pF4Qx/4/

希望这会对某人有所帮助;）

另一个超过部分的div

5 个答案: