如何讓一個div相對於它的父母被定位，但是浮在它的兄弟姐妹之上？

Question

我有一個div - #container - 延伸穿過窗口，充滿了圖形。我需要一個酒吧漂浮在右側的容器div上。如果我使用position:absolute和right:0，則根據窗口定位div，而不是#container div。

如果我使用position:relative，則根據#container div定位div，但仍佔用空間，並且不會懸停在#container內容上。

這是一個JSFiddle，我嘗試過。

http://jsfiddle.net/y8LCu/

注意，我不希望使用float:right，因爲這會保持側格中的內容，這是我不希望的流動。

Answer 1

設置父的position到relative

#container 
{ 
    position:relative; 
} 

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

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

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

你需要讓家長position: relative，如果你不想溢出你需要overflow: hidden。