如何让div相对于其父级定位，但浮在它的兄弟姐妹之上？

Question

我有一个div - #container - 横跨窗户延伸，充满了图形。我需要一个条形漂浮在右侧的容器div上。如果我使用position:absolute和right:0，div将根据窗口而不是#container div定位。

如果我使用position:relative，则div根据#container div定位，但仍占用空间，不会将鼠标悬停在#container内容上。

这是我尝试的JSFiddle。

http://jsfiddle.net/y8LCu/

注意我不想使用float:right，因为这样可以保留内容流中的div，这是我不想要的。

Answer 1

我想我按照你想要的方式得到了它？

http://jsfiddle.net/y8LCu/9/

您需要制作父position: relative，如果您不想要溢出，则需要overflow: hidden。

Answer 2

position:absolute;允许您将元素与任何定位的祖先进行比较。

<div class="parent">
    <div class="child">
    </div>
</div>


.parent { position : relative; }

.child { position : absolute; }

现在，孩子将根据父母来定位自己。 如果父级没有设置position，那么它会查看祖父母的position ...

...等等，如果它们都没有设置position，那么它将查看实际网页的位置。

此外，如果您在同一个地方附近有多个position ed元素（无论是相对/绝对/固定），并且您希望它们按照您在CSS中设置的顺序重叠，而不是按顺序排列最后设置在页面上......

...然后你还需要开始使用z-index（仅适用于已定位的元素）。

它越高，它叠加的东西越多。

Answer 3

将父级position设置为relative

#container
{
  position:relative;
}