css3 - 父级元素为fixed定位下,子元素绝对定位问题
高洛峰
高洛峰 2017-04-17 11:14:07
0
2
1004

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

membalas semua(2)
黄舟

我觉得对于疑惑一的解答应该是:

overflow 属性的默认值为 visible(对溢出内容不做处理,内容可能会超出容器。)

由于second你使用 fiexed定位,并占满整个窗口,所以即使溢出部分你也看不到。只有加上overflow:auto|scroll之后,如果有溢出才会出现滚动条。

阿神

疑问一:overflow:scroll只在块元素指定了固定的高宽才会出现滚动条,见demo:demo second并没有固定高宽,其大小是靠子元素撑开,所以overflow:scroll对其没有影响。
疑问二:third是相对于second定位,而不是当前浏览器窗口。绝对定位的相对元素是最近一个已经定位的父元素,如果没有,则相对于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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan