如何在div内定位绝对值? [英] How to position absolute inside a div?

问题描述

我在将一组div放置在另一个div中时遇到了一个奇怪的问题.我认为最好用图像来描述它:

I'm having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image:

黑色(#box)div内有两个必须位于同一位置的div(.a，.b).我试图实现的效果如第一个图像所示，第二个是我得到的效果.看起来div是否在未清除或未清除的情况下浮动，显然不是这种情况.任何想法都将受到欢迎！

Inside the black (#box) div there are two divs (.a, .b) that have to positioned in the same place. What I'm trying to achieve is pictured in the first image, second one is the effect I get. It looks like if the divs were floated without clearing or something, which is obviously not the case. Any ideas would be welcome!

以下是此示例的代码:

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>

推荐答案

绝对div是从文档流中删除的，因此包含div的内容除了填充外没有任何其他内容.给#box一个高度以填充它.

The absolute divs are taken out of the flow of the document so the containing div does not have any content except for the padding. Give #box a height to fill it out.

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

这篇关于如何在div内定位绝对值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！