包含父元素中的绝对元素

Question

我发现奇怪的是我的绝对元素完全在父元素之外。我希望它完全包含在100％的元素中，除了它之外什么也没有，但这似乎不是它发生的方式。绝对元素left和top刚刚从父元素开始，绝对元素占文档其余部分的100％。

HTML

<div id="box" class="home_box">
    <div class="box_hover"></div>
    <h3>Heading/h3>
    <p>Content</p>
</div>

CSS

#box {height:200px; width:400px;}
.box_hover {background:#000; height:100%; opacity:0.1; position:absolute; width:100%;}

如您所见，高度和宽度均为100％。我做错了什么？

Answer 1

#box需要position: relative，position: fixed或position: absolute才能将position: absolute子元素相对于其定位。

absolute定位元素将定位到最近的父级，其位置设置为relative，absolute或fixed。没有这样的父母，它将相对于身体定位。

position: relative的{​​{1}}很可能是您正在寻找的。

Answer 2

您应该将position:relative添加到父元素