css - 如何在 float 父级中定位绝对定位的div？

Question

我试图将 arrow div 定位在 float div right 的边缘，所以我给 arrow 绝对位置，left 为 0 .

我知道绝对位置不会在静态流中，它与其他位置不同。甚至认为它应该服从 parent 的左值，不是吗？

为什么在js arrow 没有放置在 right div 的边界，而是放置在外部 div

HTML

<div id="wrapper">
<div id="right">
    <div id="arrow">
      arr
    </div>
</div>
</div>

CSS

#wrapper{
    width:500px;
    height:500px;
    border:2px solid green;
}
#right {
    float:right;
    width:250px;
    height:250px;
    border:2px solid green;

}
#arrow {
    position:absolute;
    background-color:blue;
    color:white;
    left:0;
}

Answer 1

你必须做 position: relative;在其父级上使用 id="right"。

Relavant link on position