1、overflow:hidden不會被隱藏的情況

擁有overflow:hidden樣式的塊元素內部的元素溢位有時候不會被隱藏。當同時滿足以下條件：

• 擁有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式；
• 內部溢位的元素是通過position:absolute絕對定位，並且該定位元素的包含塊是設定overflow:hidden元素的父級元素。

2、CSS2.1對overflow的描述

可以參考CSS2.1規範對overflow的描述：

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element。

大概意思是：overflow屬性用於規定，當一個塊元素容器的內容溢位元素的盒模型邊界時是否對其進行剪裁。overflow屬性影響被應用元素的所有內容的剪裁。但如果後代元素的包含塊是整個視區（通常指瀏覽器內容可視區域，可以理解為body元素）或者是該容器（定義了overflow的元素）的父級元素時，則不受影響。

也就是說會被overflow:hidden隱藏的情況是：後代元素是絕對定位，但包含塊是該容器（定義了overflow的元素）；或者後代元素是非絕對定位元素。

3、overflow:hidden不會被隱藏的案例

如下程式碼所示，第一個盒子和第二個盒子都是絕對定位。但是第一個盒子的包含塊是設定overflow:hidden元素的子元素，第二個盒子的包含塊是視口。因此第一個盒子溢位隱藏，第二個盒子溢位可見。

<style>
.over-hidden{overflow:hidden; height:30px; font-size:14px; width:100px; border:2px dotted #ddd;}
.outer{position:relative}
.inner1{position:absolute; top:0; background:yellow;}
.inner2{position:absolute; top:70px; background:pink;}
</style>
<div class='over-hidden'>
	<div class='outer'>
		<div class='inner1'>這是第一個盒子。這是第一個盒子</div>
	</div>
	<div class='inner2'>這是第二個盒子。這是第二個盒子</div>
</div>