被遮挡的绝对定位 z-index

<div class=”A” style=”position:relative;”>A (relative)
 <div class=”logo” style=”position:absolute;z-index:99999;“></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>

最近做minisite项目时,碰到了个奇怪的定位问题: 以上的A,B两个盒子是相对定位,
标牌logo是A的子级,基于A做绝对定位
问题描述:我们希望标牌logo显示在最上面,但在IE下logo标牌部分被B区域遮住,B在最上层显示,调整logo的z-index的数值调整无效,firefox下显示正常。

解决方案:先了解一下所涉及到的几个定位特性(非官方解释):
1. 相对定位元素默认的z-index的数值是0。
2. 当两个相对定位同时出现时,代码靠后的z-index优先。
3. 子级遵循父级设定的z-index;如果子级设定了绝对定位、z-index,可以冲破父级显示
这个问题主要是ie对上面第3条错误解释导致的—在ie下子级的z-index不能冲破父级。网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别,这种方法绕了一个大圈:z-index为负值时,产生了新的ie bug。

按照定位的特性,ie的这个bug是可以回避的,从表面上看 B 遮住了logo,实际上是 B 遮住了logo的父级 A ,只要将 A 的z-index设定大于B即可。

<div class=”A” style=”position:relative;z-index:1;“>A (relative)
 <div class=”logo” style=”position:absolute;”></div>
</div>

被遮挡的绝对定位 z-index

时间: 2024-10-09 15:49:09

被遮挡的绝对定位 z-index的相关文章

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

CSS中的层叠上下文和层叠顺序

copy @ from http://www.zhangxinxu.com 四.务必牢记的层叠准则 下面这两个是层叠领域的黄金准则.当元素发生层叠的时候,其覆盖关系遵循下面2个准则: 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个.通俗讲就是官大的压死官小的. 后来居上:当元素的层叠水平一致.层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素. 在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个

css position(定位)

一个定位元素(positioned element)是其计算位置属性为 relative, absolute, fixed 或 sticky 的一个元素. 相对定位元素(relatively positioned element)是计算后位置属性为 relative的元素. 绝对定位元素(absolutely positioned element)是计算后位置属性为 absolute 或 fixed 的元素. 粘性定位元素(stickily positioned element)是计算后位置属性

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

display、 float 、position

1. display(元素显示模式) display 属性用来设置元素的显示方式. block 块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示. inline 行间对象与block刚好相反,它允许其它元素在同一行显示. none 隐藏对象 CSS Display - 块和内联元素 块元素是一个元素,占用了全部宽度,在前后都是换行符. 块元素的例子: <h1>.<p>.<div> 内联元素只需要必要的宽度,不强制换行. 内联元素的例子

CSS定位(postion)和移动(float)

5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. 有四种不同的定位方法. Static 定位HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, left, right影响. Fixed

CSS:CSS Positioning(定位)

ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值: static relative fixed absolute 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中. 静态定位

[转]深入理解CSS中的层叠上下文和层叠顺序

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显

雷林鹏分享:CSS Position(定位)

position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. 实例 div.static { po