Question

我有一个居中的div。子div（红色）应与居中的div重叠。这完全没问题。

现在我想要一个跟随重叠div（绿色）的div正确垂直定位（在重叠之后）。那么是否有可能混合绝对和相对定位？

这是我的代码：

HTML：

<div id="container">
  blubb
    <div id="overlap">
        Content goes here.
    </div> 
    <div id="after">
        after.
    </div> 
</div>

CSS：

#container{
    width:100px;
    height:400px;
    background:#ccc;
    margin:0 auto;
}

#overlap{
    position:absolute;
    left:0;
    right:0;
    height:100px;
    background:red;
    color:white;
}

#after{
    position:relative;
    height:100px;
    background:green;
    color:white;
}

这里也是jsfiddle的链接：

http://jsfiddle.net/XLfkn/

Answer 1

不，在最新版本的CSS中没有这样的东西。绝对定位是全有或全无。你不能为它的水平位置绝对定位，而不是它的垂直位置。

根据您的需求，有几种选择。一种方法是简单地将“后”放在“重叠”中：

<div id="container">
  blubb
    <div id="overlap">
        Content goes here.
        <div id="after">
            after.
        </div> 
    </div> 
</div>

如果您需要单独的边框和背景颜色，只需打包“内容就在这里”。在另一个div中，像这样：

<div id="container">
  blubb
    <div id="overlap">
        <div id="before">
            Content goes here.
        </div>
        <div id="after">
            after.
        </div> 
    </div> 
</div>

您绝对可以定位#overlap并#before和#after fixed或relative。您需要基本上拆分#overlap个样式，以便有些留在#overlap，但背景等内容会移至#before。

Answer 2

由于在您的示例中overlap具有固定的高度，您可以将after偏移相同的数量：

#after{
    position:relative;
    height:100px;
    background:green;
    color:white;
    margin-top:100px;
}

例如：http://jsfiddle.net/XLfkn/14/

当然，如果overlap具有动态高度，则无效。

CSS水平绝对位置和垂直相对位置

2 个答案: