3

使用css，我可以在不使用绝对定位的情况下将一个div放在另一个div下吗？

我有这两个 div，我希望纯白色的 div 直接出现在黄色不透明度的下方（但不是直接在角落，在轮廓的角落）。

这怎么可能实现。我一直在尝试z-index相对定位，但无济于事。

谢谢 http://jsfiddle.net/loren_hibbard/WtGsv/

4

6 回答 6

3

在不使用定位的情况下，我使用负边距向您的内容 div 添加了一种样式：

.content {
    margin-top:-100px;
}

在这里工作演示：http: //jsfiddle.net/WtGsv/3/

我建议向您的.fixed_widthdiv 添加一个 id 来容纳.contentdiv，并使用 id 给负边距，这样父 div 具有负边距，而不是子 div。

但是，如果您想使用绝对定位，我在这里更新了您的 jsfiddle：http: //jsfiddle.net/WtGsv/12/

position:relative;基本上，您在要使用的其他两个 div 周围添加一个父 divposition:absolute;

于 2012-11-06T15:12:54.770 回答
2

悠可以使用position: relative; top -100px，http://jsfiddle.net/WtGsv/1/

或者您可以使用负边距margin-top: -100px http://jsfiddle.net/WtGsv/5/

使用这两种解决方案，底部的 div 仍然占用原来的空间

请注意，动态添加 div 并不妨碍您使其绝对定位，您只需使父级相对定位，动态绝对定位的 div 将插入到您想要的位置http://jsfiddle.net/ WtGsv/10/

于 2012-11-06T15:11:26.197 回答
1

我想你应该重写标记，这很简单，我不知道你是否意识到这一点，但你可以拿起 div 并将其放置在relative定位容器中，而不需要负边距

演示

HTML

<div class="wrap">
    Add a line item
    <div class="inner_wrap"><textarea></textarea></div>
</div>

CSS

body {
    background-color: #aaaaaa;
}

.wrap {
    border: 4px dashed #ff0000;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-family: Arial;
    position: relative;
}

.inner_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #919191;
    top: 0;
}
于 2012-11-06T15:18:52.017 回答
0

如果您将它们都放在父 div 中，并将其设置为与黄色框的宽度相等，则默认情况下，白色框将直接放置在下方。

于 2012-11-06T15:14:38.997 回答
0

您可以将想要放在顶部的 div 放在想要放在下面的 div 内，并将顶部的 div 绝对放在父级内部。

示例 HTML：

<div id="bottom">
    lorem ipsum

    <div id="top">
        hello world
    </div>

</div>

CSS：

#bottom {
    background:red; /* to see dimensions */
    position:relative;
}

#top {
    background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

这是一个JSfiddle。

于 2012-11-06T15:18:22.320 回答
0

我是这样做的

.mainUnderline{
    height:8px;
    background-color:yellow;
    margin-top:-15px;
}   

.header{
    width:400px;
    text-align:center;
    font-weight:900;
    font-size:30px;
    color:black;
    padding-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
}   
<div class="header">
 “See line under me”
  <div class="mainUnderline"></div>
</div>

于 2021-10-05T09:03:26.603 回答