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

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.