jsfiddle链接:https://jsfiddle.net/md4ro30u/ 疑问一:为什么要在second的CSS中显式的写出overflow:scroll,不写这条属性无法显示所有的first块? 疑问二:在second加上overflow:scroll属性的条件下,third的绝对定位bottom:10px为什么是相对于当前浏览器窗口绝对定位而不是出现在最底部(滑动条拉到最底部)相距10px的位置?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
我覺得對於疑惑一的解答應該是:
overflow 屬性的預設值為 visible(對溢出內容不做處理,內容可能會超出容器。)
visible
由於second你使用 fiexed定位,並且佔滿整個窗口,所以即使溢出部分你也看不到。只有加上overflow:auto|scroll之後,如果有溢位才會出現捲軸。
second
fiexed
overflow:auto|scroll
疑問一:overflow:scroll只在區塊元素指定了固定的高寬才會出現捲軸,見demo:demo second並沒有固定高寬,其大小是靠子元素撐開,所以overflow:scroll對其沒有影響。 疑問二:third是相對於second定位,而不是目前瀏覽器視窗。絕對定位的相對元素是最近一個已經定位的父元素,如果沒有,則相對於body。
overflow:scroll
third
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
position
我覺得對於疑惑一的解答應該是:
由於
second
你使用fiexed
定位,並且佔滿整個窗口,所以即使溢出部分你也看不到。只有加上overflow:auto|scroll
之後,如果有溢位才會出現捲軸。疑問一:
overflow:scroll
只在區塊元素指定了固定的高寬才會出現捲軸,見demo:demosecond
並沒有固定高寬,其大小是靠子元素撐開,所以overflow:scroll
對其沒有影響。疑問二:
third
是相對於second
定位,而不是目前瀏覽器視窗。絕對定位的相對元素是最近一個已經定位的父元素,如果沒有,則相對於body
。position