如何將一個絕對定位的元素div「浮」出其容器

以下是（簡化的）場景。我有一個包含另一個div的div。外部div的大小固定，具有滾動條和相對定位。內部div大於外部div，並且相對於外部div。我希望內部div完全可見，在外部div上方「浮動」。如何將一個絕對定位的元素div「浮」出其容器

我很欣賞這聽起來很人造，因爲沒有必要用這種方法來限制外部div的大小。它是。但在實際應用中，外部div中還有其他內容需要使用滾動條進行控制。

我該如何做到這一點，單獨使用CSS？請注意，內部div必須相對外部定位，所以使用position：fixed不是一個選項。

標記：

<div id="container"> 
    <div id="popup">Popup Text</div> 
    </div>

的CSS：

#container{ 
    overflow: scroll; 
    height:50px; 
    width:50px; 
    position:relative; 
} 
#popup { 
    position:absolute; 
    top:20px; 
    border:1px solid #000; 
    height:100px; 
    width:100px; 
}

這裏有一個Plunker

來源

2013-07-23 Paul Taylor

這個元素必須是孩子，不能是兄弟姐妹嗎？ –

由於你有隱藏在父項中的溢出，沒有。 – isherwood

@Patsy：如果隱藏溢出不起作用：http://jsfiddle.net/isherwood/Yjpmu/1/ – isherwood

您可以添加額外的包裝，並設置position: relative和overflow不同的包裝： HTML

<div id="base"> 
     <div id="container"> 
     <div id="popup">Popup Text</div> 
     </div> 
    </div>

CSS

#base { 
    height:50px; 
    width:50px; 
    position:relative; 
} 
#container{ 
    overflow: scroll; 
    height:100%; 
    width:100%; 
} 
#popup { 
    position:absolute; 
    top:20px; 
    border:1px solid #000; 
    height:100px; 
    width:100px; 
}

小提琴：http://jsfiddle.net/UGftq/

的「祕密」是the overflow property

...影響所有元素的內容，除了任何後代元素剪裁（及其各自的內容和後代）其包含塊是元素的視口或祖先。

絕對定位元素的containing block是非靜態最近的提升者position。因此，當overflow元素本身沒有定位時，它不會裁剪絕對定位的後代。

來源

2013-07-23 17:34:43

哇，這是深奧的，但它的作品！很好的解釋。唯一的問題是，我無法控制包含塊在視口內的事實（我希望我正確使用這些術語）。實際的應用程序使用一個網格組件，其正確的表示取決於各種預定義的樣式還有其他解決方法嗎？ –

@PaulTaylor，如果標記在你的控制之下，你可以添加這個額外的包裝並將'position：relative'移動到它，那麼預定義的樣式應該不成問題。 –

部分標記在我的控制之下，但不幸的是，我無法改變這樣一個事實，即我感興趣的元素與具有'overflow：scroll'集的元素之間存在相對定位的祖先。 –

如何將一個絕對定位的元素div「浮」出其容器

回答

相關問題