从上面的图中我们可以明显的看到,第一张是背景图在上面,而第二个是背景图在下,这也就和上面的层叠顺序图相符,即z-index负值应该在层叠上下文元素的背景色之上 注:我测试了为box2设置position:relative;去让box2创建层叠上下文,但此时背景图还是在上面,并不能达到上面的效果,我想了想,推测是因为我们之前说过,当...
z-index是个很强大的属性,是个很强大解决定位的利器,在一个较不错的页面里面,position会满天飞,什么相对定位relative,什么绝对定位absolute,这样混合到一起,在360浏览器、谷歌浏览器可能没有问题,但在IE6或者其它IE下,问题就多了,盖的盖住,挡的挡到,有些奇葩还半显示半不显示。 好了,回到正题,z-index使用负值...
但是事实证明这样设置后, bgImg无法被点击到,hover时也不会显示手形,因为z-index为负值的元素将被放置在body层之下,所以点击和hover事件都被body层覆盖了。 解决方案: 1. z-index设为0. 主区域设为position:relative; z-index: 1;这样能保证背景层不会影响主区域,并且在主区域外的部分也可以点击。 2.结构与...
浏览器不支持为负数的情况 z-index为负值的最终表现并不一致,它与“层叠上下文”和“层叠顺序”密切相关 层叠上下文和层叠顺序:(下图是来自参考张鑫旭大神的7阶层叠顺序图) 那z-index负值在实际项目中有什么用呢? 可访问性隐藏 z-index负值可以隐藏元素,只需要层叠上下文内的某一个父元素加个背景色就可以。它与cl...
但是事实证明这样设置后, bgImg无法被点击到,hover时也不会显示手形,因为z-index为负值的元素将被放置在body层之下,所以点击和hover事件都被body层覆盖了。 解决方案: 1. z-index设为0. 主区域设为position:relative; z-index: 1;这样能保证背景层不会影响主区域,并且在主区域外的部分也可以点击。
最近做背投广告,因为默认页面没有设置z-index,发现如果将z-index为负值的元素无法点击到,那么解决方案就是将背投广告z-index设置为1,其它元素z-index增加。 假设有这样一个需求: eader和主区域是原来就有的,现在要在页面中加一个背景图,要求该背景图层在主区域之下,但在主区域之外的部分可点击,是一个链接。
z-index可以使用负值 z-index经常被赋正值,但它其实可以为负值的,ie和ff都兼容。写特殊效果时可以试试。 === <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 阿当制作 .head{height:200px;background:#...
z-index可以使用负值 z-index经常被赋正值,但它其实可以为负值的,ie和ff都兼容。写特殊效果时可以试试。 === <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 阿当制作 .head{height:200px;background:#...
关于z-index为负值的情况 与 height=100%的疑惑 最近遇到的一个小问题,记录下。 1.将z-index设为负值的话,元素会最贴近BODY,但是不能穿过body,之前我直接在body上加了个需隐藏的元素textarea,发现怎么也消失不了。最后加了个带背景的DIV把textarea套起来就可以了。用DIV把他遮住。