6

我有一个居中的 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/

4

2 回答 2

2

不，在最新版本的 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.

于 2013-01-14T00:12:18.130 回答
0

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

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

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

当然，如果overlap要具有动态高度，这是行不通的。

于 2013-01-14T00:20:33.720 回答