css - 在调整容器内堆叠 div 元素

Question

我在如何构建我正在处理的新小部件方面遇到了一些麻烦。我正在尝试实现包含一些热点的地理 map ，就像旧学校图像 map 一样。但是，出于各种目的，我想在不使用图像映射的情况下完成它。

到目前为止，我得到了这个不完整的解决方案:

http://jsfiddle.net/nielsbuus/FZJ8E/1/

HTML:

<div class="parent">
    <!-- I'm a container, I need to expand in height, when my children expand, so they don't overlap elements beneath me. Sort of like clearing floats -->
    <div class="lower">
        <!-- I contain an image. My width is fixed, but my height may vary. -->
        <img src="http://placekitten.com/300/325" />
    </div>
    <div class="higher-container">
        <div style="top: 20px; left: 30px" class="higher-spot">foo</div>
        <div style="top: 80px; left: 50px" class="higher-spot">bar</div>
        <div style="top: 85px; left: 70px" class="higher-spot">baz</div>
    </div>
</div>
<div class="successor">
  Please keep me below all of this.
</div>

CSS:

.parent {
    background-color: #ccffff;
    padding: 20px;
    position: relative;
}

.lower {
    position: absolute;
    width: 300px;
    background-color: rgba(0,0,0,0.2);
    z-index: 0;
}

.higher-container {
    position: absolute;    
    background-color: rgba(255,0,0, 0.3);
}

.higher-spot {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: rgba(0, 255, 0, 0.5);
    z-index: 1px;
}

.successor {
    font-size: 18px;
    font-family: sans-serif;
}

这里的主要问题是使用绝对定位的 z 索引 div。它们与布局的其余部分分离，导致父容器不展开，从而将后续元素放置在绝对定位元素的下方。

我正在寻找有关如何将两个 div(下层容器和上层容器)堆叠在一起并让父容器扩展到下层 div 大小的想法。

Answer 1

我不确定您为什么要在 .lower 容器上使用 position: absolute。使用它作为relative，然后给.higher-container一个top: 0规则。

Updated fiddle