Question

我试图掌握这种定位的东西。我对ABSOLUTE，RELATIVE和STATIC有所了解（

）

这就是我要做的事情。我想在简单的div部分中叠加一些图像和项目。

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

现在，Div 1和Div 2将具有＆＃39;背景＆＃39;图像（较低的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;的父级，告诉他们相对于他们的位置。如果他们不这样做，他们的孩子会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。

CSS中的定位问题

1 个答案: