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

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

高洛峰
高洛峰

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

모든 응답 (2)
黄舟

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

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

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

    阿神

    疑问一:overflow:scroll只在块元素指定了固定的高宽才会出现滚动条,见demo:demosecond并没有固定高宽,其大小是靠子元素撑开,所以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

      최신 다운로드
      더>
      웹 효과
      웹사이트 소스 코드
      웹사이트 자료
      프론트엔드 템플릿
      회사 소개 부인 성명 Sitemap
      PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!