Question

标记如下：

<div class="mask">
    <div id="content-1" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div id="content-2" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div> 
</div>

这是CSS

.mask{
    position:absolute;
    width:300px;
    height:300px;
    overflow-x:hidden;
}
.content-item{
    position:absolute;
    width:300px;
}
#content-1{
    left:10px;
}
#content-2{
    left:305px;
}

在这里小提琴：http://jsfiddle.net/steweb/9zMhY/（没有固定的高度）

我需要一个掩码只是因为我想从content-1转换到content-2。过渡本身没有问题（内容-1变形为-300px左侧，内容-2变形为0px左侧）。

上面你可以看到高度设置为300px，overflow-x:hidden按预期工作！

但是我不想为面具设置高度！好吧，如果我删除高度我看不到任何东西，只需删除overflow-x:hidden所有内容。

问题是：在不改变定位方法的情况下（我需要绝对定位，浮动会更容易），如何在不设置固定高度的情况下获得简单的overflow-x？为什么overflow-x:hidden隐藏所有内容而不是隐藏左/右的所有内容？

Answer 1

绝对定位元素的盒子模型不会影响它们的父容器。

这非常合乎逻辑，因为它们不在内部而是绝对的。除了别的东西会很奇怪。

然而，浮动元素的行为方式相同，这通常是不方便的。

解决此问题的常见做法是“clearfix”。

您可以在父容器的底部放置类似的内容。

另一种方法是手动设置高度。我不确定你想做什么，但你真的需要孩子们绝对吗？

Answer 2

面具因你的孩子position absolute而失去高度。

如果你拿出来它会起作用：

.content-item{
   position:absolute;
   width:300px;
}

Div是块元素，这意味着它们从父母那里继承了with，因此不需要将with设置为300. aprent已经absolute为什么你使用绝对的子div？

jsfiddle链接： http://jsfiddle.net/9zMhY/3/

绝对定位和溢出-x

2 个答案: