如何在div中定位绝对？答案

【问题标题】：How to position absolute inside a div?如何在div中定位绝对？
【发布时间】：2010-11-11 08:55:45
【问题描述】：

我在将一组 div 定位到另一个 div 中时遇到了一个奇怪的问题。我认为最好用图片来描述它：

在黑色 (#box) div 内，有两个 div (.a, .b) 必须位于同一个位置。我想要实现的是第一张图片，第二张是我得到的效果。看起来如果 div 是在没有清除或其他东西的情况下浮动的，显然不是这样。欢迎任何想法！

这是此示例的代码：

CSS：

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML：

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>

【问题讨论】：

您使用的是哪个 jQuery 插件？它是否采用允许您覆盖其绝对定位的选项？你能编辑插件代码来改变它的工作方式吗？
我正在使用 jQuery Cycle Lite (malsup.com/jquery/cycle/lite) - 我可以编辑代码，只需要确保它仍然可以工作 ;)
图像是一个哑弹。返回 404。这个帖子可能已经被回答了，但是为了以后帮助别人，你应该留下它，或者用文字描述它。
图片：goo.gl/9FbqEZ
@niraj.nijju...现在链接坏了

标签： css positioning

【解决方案1】：

首先，所有块级元素都静态定位到“文档”。所有元素的默认定位是position: static，这意味着该元素没有定位，而是出现在文档中通常会出现的位置。通常你不会指定这个，除非你需要覆盖之前设置的定位。
相对位置：如果指定 position: relative，则可以使用 top 或 bottom、left 或 right 来相对于它在文档中通常出现的位置移动元素。
当您指定 position: absolute 时，该元素将从文档中移除并准确放置在您告诉它的位置。

所以关于你的问题，你应该定位包含块的相对位置，即：

#parent {
  position: relative;
}

你应该将子元素绝对定位到父元素，如下所示：

#child {
  position: absolute;
}

见：Learn CSS Positioning in Ten Steps

【讨论】：

@WillJohnson 欢迎朋友，你可以看看foundation.zurb.com 一个非常好的易于开始/使用的框架
@JimmyObonyoAbor 最好的

【解决方案2】：

绝对 div 从文档流中取出，因此包含的 div 除了填充之外没有任何内容。给#box 一个高度来填充它。

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}

【讨论】：

感谢您的提示。高度的问题在于它不会将“后” div 向下推，只是覆盖它。
应该的。看这里：ejgejg.com/test/abs.html之后有没有其他的样式适用？
这就是我所说的肮脏黑客。我相信@RichieHindle 的答案是：父块“位置：相对”，内部块“位置：绝对”。工作得很好。

【解决方案3】：

#a 或 #b 中的一个必须不是 position:absolute，这样#box 才会增长以适应它。

所以你可以阻止#a 成为position:absolute，并且仍然将#b 定位在它的顶部，如下所示：

 #box {
        background-color: #000;
        position: relative;     
        padding: 10px;
        width: 220px;
    }
    
    .a {
        width: 210px;
        background-color: #fff;
        padding: 5px;
    }
    
    .b {
        width: 100px; /* So you can see the other one */
        position: absolute;
        top: 10px; left: 10px;
        background-color: red;
        padding: 5px;
    }
    
    #after {
        background-color: yellow;
        padding: 10px;
        width: 220px;
    }

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>
    <div id="after">Hello world</div>

（请注意，我已将宽度设置为不同，因此您可以看到一个在另一个之后。）

编辑贾斯汀的评论：那么你唯一的选择是指定#box的高度。这个：

#box {
    /* ... */
    height: 30px;
}

假设 a 和 b 的高度是固定的，则可以完美运行。请注意，您需要通过在 HTML 顶部添加 doctype 将 IE 置于标准模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

在此之前正常工作。

【讨论】：

谢谢。但就像我在对蒂姆的回答的评论中所说的那样，我正在使用一个 jQuery 插件，它将使 a 和 b 绝对定位，所以不能让它们不定位。
是的，我最终为#box 添加了高度。谢谢！
如果您需要手动设置包含 div 的高度，这个答案的意义何在？如果您的孩子有任意身高怎么办？

【解决方案4】：

this article 中描述了该问题（除其他外）。

#box 是相对定位的，这使它成为页面“流”的一部分。您的其他 div 是绝对定位的，因此它们已从页面的“流”中删除。

页面流意味着元素的定位会影响流中的其他元素。

换句话说，正如#box 现在看到的dom，.a 和.b 不再是“内部”#box。

要解决此问题，您需要将所有内容都设为相对或绝对。

一种方法是：

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}

【讨论】：

谢谢，但事实是，使用这个定位不是我的选择。我正在使用一个 jQuery 插件，它将使 a 和 b 绝对定位。
你能让#box绝对定位吗？此外，jquery 可以在您的插件运行后更改这些项目的 css。
@TimHoolihan 如果你把一个绝对定位的元素放在一个大小合适的相对定位的元素中，它会完美地坐在里面！看看艾米丽的回答。