关于遮盖的问题 Z-index的问题

owaspcodding 2013-05-06 02:56:46

第一个层是居中宽960px高50px

第二个是一个全屏幕的slider

我想在第一个层的左下角放一张图片107*85的一个层25遮盖像素，在IE8上实现了，但在IE7和6下就会被slider里的图片遮盖上
这个是我写的关于这个图片的css .headtop{ position:absolute; z-index:999; width:107px; height:85px; margin-top:17px;}

求高手给简单提一下我自己弄就行

...全文

281 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

NA_na 2013-06-07

打赏
举报

回复

IE6和IE7下的z-index属性，需要和父容器的z-index属性搭配着用的。最大值无法超过父容器的z-index值

当然感 2013-06-06

打赏
举报

回复

给第一个层(headtop的父层)也设置一个 position:relative; z-index:10;（比slide的z-index的值大即可）

zwzttlove 2013-05-08

打赏
举报

回复

CSS里面加一个display:inline;试试

dong3580 2013-05-08

打赏
举报

回复

ie6,貌似对margin兼容性有点影响吧!

项目构建 webpack + vue + vue-router + vueX + axios + antd of vue 起因构建项目的时候由于采用的 antd of vue ui库，里面没有类似点击唤醒遮罩层的组件，所以自己手写vue组件进行引入，主要用的是 css3 z-index 属性，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求，由于用的是vant-ui）里面有自带的组件所以就引入直接拿来用了。经过自认为写的写的代码上面逻辑是没有错误的，可结果却是以下。。。。出现弹窗的时候，滑动底部z-index 属性不起作用。更令人无语的

`position: relative;z-index: -1;`时，子控件无法点击

最近写CSS3和js结合，遇到了很多次z-index不生效的情况： 1.在用z-index的时候，该元素没有定位（static定位除外） 2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数下拉框例子： 1.盖住的时候： 2.将下拉框的z-index设置为负数代码： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html>

关于z-index，目前遇到的一些问题 1. 某些浏览器下元素层级遮盖存在bug; 2. 某个元素z-index设的太大，导致始终无法被遮盖; 3. js动态计算z-index，导致元素覆盖关系部可控层级遮盖bug出现的原因： IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au

1.问题的出现写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。元素的结构大致如下：

61,129

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章