CSS 中 fixed 元素为什么会遮盖滚动条？

html-css016

CSS 中 fixed 元素为什么会遮盖滚动条？,第1张

这两个滚动条不是同一个元素的滚动条，第一个是那个绝对定位的div的滚动条，第二个则是body的滚动条。从它们的黑色框线就能看出来区别啊。所以第二张图的蓝色框当然不会覆盖滚动条啊，因为那是body的滚动条。

而第一张图蓝色框覆盖滚动条很容易理解啊，定位元素是脱离文档流的，它们之间的前后关系是由z-index属性来决定的（如果z-index相同则按物理顺序），与它们物理上的包含（或者说父子）关系无关，而滚动条也是元素的组成部分，要覆盖那肯定是连滚动条也一起覆盖的，否则效果就会不伦不类的。

这个是它的css，意思都好理解，但貌似还有一些定义，没有找到。

<htmle>

<style>

#extraDiv1 {position:fixedwidth:227pxbottom:0pxbackground:url(r3_zen666_tombstone.png) no-repeat left topheight:267pxleft:540px}

* {padding-bottom:0pxmargin:0pxpadding-left:0pxpadding-right:0pxpadding-top:0px}

</style>

<body>

<div id="extraDiv1"><span></span></div>

</body>

</html>

说明：fixed是以body为定位时的对象，总是根据浏览器的窗口来进行元素定位，通过"left""top""right""bottom“来进行定位

用法：

效果

此时拉动浏览器的上下滚条，层2在浏览器中的位置都不会发生变化