問題描述

jsfiddle鏈接:https://jsfiddle.net/md4ro30u/疑問一：為什么要在second的CSS中顯式的寫出overflow:scroll，不寫這條屬性無法顯示所有的first塊？疑問二：在second加上overflow:scroll屬性的條件下,third的絕對定位bottom:10px為什么是相對于當前瀏覽器窗口絕對定位而不是出現(xiàn)在最底部(滑動條拉到最底部)相距10px的位置？

問題解答

我覺得對于疑惑一的解答應該是：

overflow 屬性的默認值為 visible（對溢出內(nèi)容不做處理，內(nèi)容可能會超出容器。）

由于second你使用 fiexed定位，并占滿整個窗口，所以即使溢出部分你也看不到。只有加上overflow:auto|scroll之后，如果有溢出才會出現(xiàn)滾動條。

疑問一：overflow:scroll只在塊元素指定了固定的高寬才會出現(xiàn)滾動條，見demo：demo second并沒有固定高寬，其大小是靠子元素撐開，所以overflow:scroll對其沒有影響。疑問二：third是相對于second定位，而不是當前瀏覽器窗口。絕對定位的相對元素是最近一個已經(jīng)定位的父元素，如果沒有，則相對于body。

absolute Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

position