CSS中的定位问题答案

【问题标题】：Issue with positioning in CSSCSS中的定位问题
【发布时间】：2015-01-25 02:21:30
【问题描述】：

我正在努力掌握这种定位的东西。我对 ABSOLUTE、RELATIVE 和 STATIC 有一定的了解。

这就是我想要做的。我有一些图像和项目要覆盖在简单的 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的隐藏，但图像仍然完整显示。知道为什么它没有被切断吗？（忽略我的示例代码中的大小，它针对这个问题进行了简化，假设它延伸了）

【问题讨论】：

在纯 CSS 中，你不能做 top:+2px; 这样的事情。
嗯...这部分似乎对我有用。以为我可以改变它。更新：我删除了所有的+，一切都还是一样
快速猜测一下，我想它们实际上不会是 DIV1 的位置 0,0，而是页面的 0,0（恰好也是 DIV1 的 0,0）。 DIV1 和 DIV2 可能必须是 position:relative
您的 div2 需要与静态不同的位置......就像真实的那样，才能成为绝对儿童的参考点
啊！！！！非常感谢！这解决了它！

标签： html css position

【解决方案1】：

具有position:absolute 的元素需要具有具有position:relative; 的父元素，以告诉它们相对于它们定位。如果不是，他们的孩子会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。

【讨论】：