Question

我正试图让一组浮动左边的父母应用于他们，但也有相对位置，并且在每个人的内部我都有一个像这样绝对位置的div：

<div class="wrapper">
    <div class="pa">
        <div id="apDiv1"><img src="images_1/logo-u16785.png" width="194" height="190"></div>
    </div>
    <div class="pa">
        <div id="apDiv4"><img src="images_1/zilogo-u16782.png" width="194" height="190"></div>
    </div>
</div>

和css

.wrapper {
  width:1300px;
  position: relative;
}

.pa {
  float:left;
  width:650px;
  position: relative;
}

#apDiv1 {
  position: absolute;
  width: 650px;
  height: 190px;
  z-index: 4;
  left: 39px;
  top: 10px;
}

#apDiv4 {
  position: absolute;
  width: 650px;
  height: 190px;
  z-index: 4;
  left: 39px;
  top: 10px;
}

现在我的问题，如果你看到，2个选择器具有相同的顶部和左侧，但因为它们是2个不同的，父级是左侧浮动并且位置相对我认为选择器应该相对于它们的父级定位，但他们在彼此之上，为什么？

感谢!!!

Answer 1

这可能是因为绝对定位的元素不知道浮动元素的边界，但我怀疑很可能是因为你有＃apDiv1和＃apDiv2的样式，但你的实际元素ID是“apDiv1”和“apDiv4”

Answer 2

我不确定这是否是您正在寻找的，但首先要确保您的CSS类和DIV具有相同的名称。

我将float: left;从“。pa” div更改为display: inline-block;。

Check my Fiddle

父亲相对定位和漂浮左边的孩子绝对定位

2 个答案: