开门见山
今天给固定定位的div设置宽度百分比,发现他是相对于窗口而不是相对于父元素,删除掉div中的内容,注释掉div的宽度,发现div消失了。
第一个疑惑:块元素的默认宽度不是占据父元素百分百么?为什么这个没有内容的div宽度是0?
然后想到固定定位元素会脱离标准文档流,但是他的父元素还在标准文档流中,这可能是固定定位的元素设置宽度百分比不再相对于父元素,而是相对于窗口;固定定位的块元素的默认宽度也不再是父元素的百分百,而是由内容撑开的原因?
然后我开始测试div作为块元素的其他两个特点是否还在:
第一,是否设置宽高生效? 答:生效
第二,是否仍旧独占一行? 答:不再独占一行,其他脱离标准文档流的元素,只要与他设置垂直方向定位一致就可以与他共用一行。
两个脱离标准文档流的元素被允许设置有冲突的定位位置,他们不会相撞,而是会有一方被覆盖。
一个想象开始逐渐清晰:
所有的元素都位于一个3d空间,标准文档流是Z=0的平面,脱标元素都会离开Z=0这个平面,他们的Z值理论上都不相等,即他们都不在一个水平面上,只有这样他们才能永远不相撞,只会彼此覆盖。
两个脱标元素如果定位重叠,谁显示?谁被覆盖? 答 :是由Z-index 属性决定,Z-index 属性值大的会覆盖属性值小的。
这个值可以理解为脱