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

Question

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

如果我使用position:relative，那么 div 会根据 #container div 定位，但仍会占用空间并且不会悬停在 #container 内容上。

这是我尝试制作的 JSFiddle。

请注意，我不想使用float:right，因为这会使侧 div 保持在内容流中，这是我不想要的。

score 3 · Accepted Answer

我想我得到了你想要的方式？

你需要做父母position: relative，如果你不想要你需要的溢出overflow: hidden。

score 2 · Accepted Answer

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

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


.parent { position : relative; }

.child { position : absolute; }

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

...不断，如果它们都没有position集合，那么它将查看实际网页的位置。

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

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

它越高，它堆放在上面的东西就越多。

score 1 · Accepted Answer

1

将父级设置position为relative

#container
{
  position:relative;
}

于 2013-05-30T04:28:19.733 回答

3 回答 3