有没有人知道ie z-index bug的工作修复？我遇到了一些解决方案,但有兴趣看看这里是否有人知道更好的解决方案.

谢谢!

我正在构建的地图应用程序中有2个z-index图层.单击要放大的图层时出现问题.单击处理程序位于基础z-index图层上,我不希望在单击上层图层中的控件时触发它.

我遇到的问题是,无论什么事情都会引发事件,但是当点击顶层的某些内容时,事件的originalTarget属性不是底层图像.反正有改变吗？

这个属性让我感到困惑.

好吧..我在谷歌搜索:

什么是z指数？

z-index属性指定元素的堆栈顺序.堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面.注意:z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定). 答案来源

z-index使用什么？

元素彼此重叠的顺序.为此,您可以为每个元素分配一个数字(z-index).系统是具有较高编号的元素与具有较低编号的元素重叠. 答案来源

好吧,我现在明白了,它组织了元素,我们可以使用任何数字...更高的z-index数字出现在所有元素上......很好.

z-index和jquery ..非常简单,非常好

...但我从答案中注意到它取决于位置属性,所以 - > ...(谷歌)..

z-index和position之间有什么关系？

演示 - > >> 来源

好的...所以z-index和位置是一对......必须在一起..

需要更多信息::

它会在浏览器中产生任何冲突(IE7,IE8,Chrome等)吗？

什么是z-index使用或我们可以用z-index做什么(取决于标签)？

...等等？

如果我理解错了,请纠正我

提前致谢.

我使用负边距来布局两列:

<div id="left-column"><input type="checkbox" /></div>
<div id="right-column">
    <div id="right-column-inner"></div>
</div>

CSS:

#left-column { width: 200px; float: left;}
#right-column { margin-left: -200px; width: 100%; float: left;}
#right-column-inner { margin-left: 200px; float: left;}

不幸的是,在Opera 10.54,Safari 4和FF 3+​​中,复选框不可点击,因为#right-column它在向下传播到复选框之前捕获点击.

我试过操纵z-index但没有运气.

知道如何让这个工作吗？

我试图生成这样的图形:

但我得到:

CSS:

 #green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; }
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; }
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;}

HTML:

<div id="blue"></div>
<div id="green">
    <div id="red"></div>
</div>

主要问题是html代码需要像我上面指定的那样确定.请告诉我实现此功能所需的CSS代码(必须与IE7 +兼容).或者JS可能对此有所帮助？我会很高兴任何建议.

描述

画布负z-index存在问题.基本上,当固定位置有2个元素时,一个是块元素,另一个是画布,z-index画布的是负片,无论它是什么,它都会在第二个元素上滚动z-index.

此错误仅发生在Chrome:Mac和PC上.

代码示例

这是一个HTML示例(减少了问题):

<ul>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
</ul>

<div>
    <canvas />
</div>

和CSS

html,body{
    height : 150%;
}

ul {
    position : fixed;
    z-index : -1;
    top : 0;
    left : 0;
    width : 100%;
    margin : 0;
    padding : 0;
    overflow : auto;

    li {
        float : left;
        width : 33%;
        height : 100px;
        background : red;
        position : relative;
        list-style: none;

        span{
            display:block;
            position : relative;
        }
    }
}
div {
    position …

我希望某些图层始终位于其他图层之上,无论它们以何种顺序添加到地图中.我知道bringToFront(),但它不符合我的要求.我想根据属性动态设置zIndex.

Leaflet有方法setZIndex(),但这显然不适用于geoJson层:https://jsfiddle.net/jw2srhwn/

有任何想法吗？

如果我有这样的事情:

有没有办法在BOTH div上触发mouseover事件？

编辑:对不起所有..我试图简化这个问题所以很清楚理解,我忘了提到我有超过100个这样的div,所以可能这些解决方案不起作用.我要看看我是否可以对它们进行调整.非常感谢大家.

我有一个标准的jQuery UI对话框.在该对话框中,我有一个自定义的jQuery UI按钮,允许我为日历事件选择一个事件类型.我正在使用jQuery UI位置实用程序来绝对定位包含可用事件类型列表的div,如图中所示.

显示事件类型div时,任何比可用空间长的内容都会在对话框的边缘消失.如果它是一个iframe,或者如果绝对定位的父级具有更高的z-index,我会期望这个.但是,jQuery UI对话框是一个简单的绝对定位div,其z-index为1002(默认值),我的widget显示事件类型的div是一个绝对定位的div,其z-index为1003.我希望我的div在堆叠顺序中会占据更高的优先级.

我的问题是:这里发生了什么？为什么我的div被对话框的底边隐藏？

这是代码

<ul>
    <li class="test">
         <a href="#">
            <h2>Blah</h2>
            <p>Blah Blah Blah</p>
         </a>
    </li>
</ul>

基本上,我的列表已经有一些样式,例如,我为它设置了背景颜色.

现在在课堂"测试"中,我还设置了背景图像.

我的问题是我想让背景图像保持在背景颜色之上,我不知道如何实现这一点.我尝试使用z-index,但我认为它不适用于背景图像.

请看一下图片

编辑:这是CSS代码

例如,这是我的列表的样式

#sidebar ul li{  
    background:#ccf;
}

这是课堂测试的风格

.test{
    background-image: url('img/big_tick.png');
    background-repeat:no-repeat;
    background-position: bottom right;
    -moz-background-size: 30%;
    -webkit-background-size: 30%;
    background-size: 30%;    
    margin-right: 30px;
}