>  기사  >  웹 프론트엔드  >  2个div层 显示顺序问题_html/css_WEB-ITnose

2个div层 显示顺序问题_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 09:40:511146검색

.leftg1{top:0px;position:relative; z-index:1;}.tableindex{z-index:2;position:relative;}

想让tableindex 在leftg1上面  firefox  可以 ie 下面不行
如果 .leftg1 {top:0px;position:relative; z-index:-1;} 可以 但是 .leftg1 上面的元素不能编辑了 求解


回复讨论(解决方案)

leftg1 层是移动层

<div id="a">	<div id="a1" style="position:relative; z-index:2;">A-1 下拉层</div></div><div id="b" ><div id="b1"  style="position:relative;z-index:1;">B 上下滚动层</div></div>

是这个样子的

不用

XML/HTML code?123456

    
A-1 下拉层
B 上下滚动层
……
你这样的话 ,他俩永远不会覆盖啊

2个重回的时候就 遮盖了

就像这个页面  产品中心下拉 被左侧遮住了(ie 下遮住了 firefox 没有遮住)

对于IE浏览器的种种毛病我就不多说了,今天就说说在ie下如果设置了position:relative;后z-index就失效的问题,在做前端开发的时候Yovae我就被此问题纠缠过。
IE浏览器对于设置了position的元素会自动生成一个新的stacking context,导致 z-index被重置 为0,所以z-index才失效了。所以我们需要在这个元素的父元素上设置一个更高的z-index值。来消除这个影响。

参考:http://www.yovae.com/blog/ie%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8Dz-index%E5%A4%B1%E6%95%88%E9%97%AE%E9%A2%98.html

z-index:1写在html中

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.