css3 - 父级元素为fixed定位下，子元素绝对定位问题

Question

jsfiddle链接:https://jsfiddle.net/md4ro30u/
疑问一：为什么要在second的CSS中显式的写出overflow:scroll，不写这条属性无法显示所有的first块？
疑问二：在second加上overflow:scroll属性的条件下,third的绝对定位bottom:10px为什么是相对于当前浏览器窗口绝对定位而不是出现在最底部(滑动条拉到最底部)相距10px的位置？

Answer 1

I think the answer to question 1 should be:

The default value of the overflow attribute is visible (overflow content is not processed, and the content may exceed the container.)

Because second you use fiexed positioning and fill the entire window, so you can't see even the overflow part. Only after adding overflow:auto|scroll, the scroll bar will appear if there is overflow.

Answer 2

Question 1: overflow:scroll The scroll bar will only appear when the block element specifies a fixed height and width. See demo: demo second does not have a fixed height and width. Its size is expanded by child elements, so overflow:scroll has no effect on it.
Question 2: third is positioned relative to second, not the current browser window. An absolutely positioned relative element is the most recently positioned parent element, or if there is none, it is relative to 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