如果孩子的位置是絕對的，父母是溢出的：隱藏的，為什么孩子會溢出？

Question

如果子是position:absolute ，則父overflow:hidden ，而父進position:static ，子進程仍然溢出：

 <div style="overflow:hidden;height:100px;border:2px solid red;"> <div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5"> </div> </div> 

如果父項的位置不是static ，則子項不再溢出：

 <div style="overflow:hidden;height:100px;border:2px solid red;position:relative;"> <div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5"> </div> </div> 

為什么會這樣？ 這個行為叫什么？

我正在使用Chrome，這種行為在瀏覽器中是否一致？

Answer 1

那是因為規范將overflow定義為

此屬性指定塊容器元素的內容在溢出元素框時是否被剪切。 它影響所有元素內容的剪切，除了任何后代元素（及其各自的內容和后代），其包含塊是視口或元素的祖先。

絕對定位元素是一個后代，其包含塊由元素的祖先建立，具有overflow: hidden ，如“包含塊”的定義中所述

如果元素具有position: absolute ，則包含塊由最近的祖先建立，其position為absolute ， relative或fixed

因此絕對定位的元素不受overflow: hidden影響overflow: hidden 。

如果父項被定位，它將是絕對定位元素的包含塊，然后overflow: hidden會影響它。

Answer 2

首先，仔細查看MDN Documentation CSS Position 。

那么這與你的問題有什么關系呢？ 讓我們先分析一下position: absolute ：

絕對：不要為元素留出空間。 相反，將其定位在相對於其最近定位的祖先或包含塊的指定位置。 絕對定位的盒子可以有邊距，它們不會與任何其他邊緣一起折疊。

就你的情況而言，定位的祖先div元素沒有任何指定的position屬性。

因此，它假定默認position: static ，除了頁面中元素的標准位置之外，它實際上只指定了其他內容。 看看這個：

static：此關鍵字允許元素使用正常行為，即它在流中的當前位置布局。 top，right，bottom，left和z-index屬性不適用。

換句話說，孩子不會相對於其父母定位。 奇怪的行為是因為你期望父div在沒有定位時被定位。 它要問：最近定位的父母是什么？ 答案是在DOM樹上找到它，邏輯上是因為你的例子中沒有任何內容，但你的兩個div ，最近的父節點將是網頁文檔本身。

那么， 你怎么解決這個問題呢？ 通過添加（例如） position: relative對於父div元素。

編輯：溢出和位置屬性 ：

通過使用overflow ，您通常嘗試執行以下一項（或全部）：剪輯內容，渲染滾動條，以特定方式顯示任何溢出的內容。 我收集你的目標然后是讓孩子div 不溢出父div 。 如何避免這種溢出的問題可以帶你到一個你不想去的地方 。

因此，通過縮小東西溢出是所有關於：（長話短說）它是關於控制/修改的，什么是特定HTML元素里面的內容的外觀和感覺。 請記住，內容，而不是元素本身。

在你的情況，你可能會認為你的父母的子元素div作為母公司的內容div 。 相反，您實際看到的是子元素的內容。 因此，父和子相對於彼此的position不受overflow屬性的控制，而是由position屬性控制。

這在瀏覽器中是否一致？ ：

從CSS 2.1開始，所有主流瀏覽器都支持overflow (visible | hidden | scroll | auto)和position (static | relative | absolute) 。 當您擴展overflow時會發生任何差異，因為它的某些屬性不受廣泛支持。 請參閱此處以供參考： 我可以使用：溢出 （也可以滾動到CSS 2.1參考的底部）。

你對此有任何疑問嗎？ 請在下面的評論中提問。

Answer 3

溢出屬性無論如何都不會繼承： http ： //www.w3schools.com/cssref/pr_pos_overflow.asp

因此，在您的第一種情況下，它是可行的是不可行的，因為在靜態位置，瀏覽器按照它讀取的順序放置它並忽略碰撞。

在第二種情況下，絕對定位實際上為容器div設置了一個空間，然后將第二個div放入其中 - 從而使溢出隱藏起來。

您可以這樣想象：在第一種情況下，您創建了兩個div，它們彼此不相關但在第二種情況下相互定位，您創建了一個容器，並通過將容器的溢出設置為hidden來強制將另一個div加入其中。

希望它有助於理解，

安德魯

Answer 4

position屬性的相對值與靜態值的相對值非常相似。 主要區別在於相對值接受頂部，右側，底部和左側的框偏移屬性。 這些盒子偏移屬性允許元素精確定位，從而將元素從任何方向的默認位置移開