html - CSS 中的定位问题

Question

我正在努力掌握定位方面的知识。我了解(某种程度上)绝对、相对和静态。

这就是我想要做的。我有一些图像和元素要覆盖在简单的 div 部分中。

---------------------------------------------------
|                                                 |
|                    Div 1                        |
|                                                 |
---------------------------------------------------
---------------------------------------------------
|                                                 |
|                    Div 2                        |
|                                                 |
---------------------------------------------------

现在，Div 1 和 Div 2 将有“背景”图像(较低的 z-index)，但我也想在它们上面叠加图像。

<div class="menubar">
    <img class="bar" src=...>
    <img class="logo" src=...>
    <table class="mytab">...</table>
</div>
<div class="div2">
    <img class="bgimg" src=...>
    <img class="overlay img1" src=...>
    <img class="overlay img2" src=...>
</div>

这是 CSS:

.menubar {
    overflow: hidden;
    position: static;
    height:100px;
}
.bar {
    width:1000px;
    height:75px;
    position:absolute;
    z-index: 3;
}
.logo {
    position:absolute;
    z-index:10;
    top:+15px;
    left:+400px;
}
.mytab{
    position:absolute;
    z-index:10;
    left:+10px;
    top:+2px;
}

.div2{
    overflow: hidden;
    position: static;
    height:100px;
}
.bgimg{
    width:1000px;
    position:absolute;
    height:131px;
    z-index: 3;
}
.overlay{
    position: absolute;
    z-index: 10;
}
.overlay.img1 {
    width:323px;
    top: +18px;
    left: +677px;
}
.overlay.img2 {
    width:323px;
    top: +18px;
    left: +277px;
}

发生了什么:

第一个 DIV 显示正确，所有元素都显示在它们应该显示的位置。

对于 DIV2，bgimg 显示在它应该出现的位置(在 Div2 的 0,0 处)。但是，Div2 中的其他图像(img1、img2)的绝对坐标为 DIV1 的 0,0，而不是 DIV2!

为什么？

作为后续的一个附加问题:假设 div 2 中的 img1 超出了 div2 的宽度。我有上面的 css 溢出:div2 隐藏，但图像仍然完整显示。知道为什么它没有被切断吗？ (忽略我的示例代码中的大小，它已针对此问题进行了简化，只是假设它伸出了)

Answer 1

具有position:absolute 的元素需要具有具有position:relative; 的父元素，以告诉它们相对于它们定位。如果他们不是，他们的 child 会 position themselves relative to the page itself .

div {
    height:150px;
}

img {
    top:0;
    position:absolute;
}

如果您给您的 2 个容器 div position:relative;，那么它们中的绝对定位元素将为 adjusted relative to their parents position .

div {
    position:relative;
    height:150px;
}

img {
    top:0;
    position:absolute;
}

然后根据要求，您可以将 overflow:hidden 应用到本质上 crop any overflow of the images .