为什么负z-index和非静态位置会在大多数浏览器中禁用我的复选框？

Question

为什么负z-index和非静态位置会在大多数浏览器中禁用我的复选框？

我有一个包含复选框的div.在某些时候z-index,这个div是负面和邮件relative,在这种情况下,在最新版本的Chrome,FF,Safari或Opera中无法访问该复选框.但是,该复选框在IE9中可以访问.这同样适用于absolute与fixed同时static工作.

我一直试图找到背后的原因,但无济于事.

我可以假设非IE浏览器处理这种情况是正确的,IE不是吗？

一个例子:

<html>
<head>
<style type="text/css">
.divWithCheckboxRelativePos{
    position: relative;
    z-index:-1;
}
.divWithCheckboxStaticPos{
    position:static;
    z-index:-1;
}

</style>
</head>
<body>
<div class="divWithCheckboxRelativePos">
    Does not work:<input type="checkbox" onclick="alert(this.checked);"/>
</div>
<div class="divWithCheckboxStaticPos">
    Works:<input type="checkbox" onclick="alert(this.checked);"/>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

My *_*rts 6

之所以static工作是因为z-index只适用于定位的元素- ,absolute,.relativefixed

我相信在这个例子中,IE可能是z-index正确的.您描述的问题听起来像是checkbox放在Chrome,FF,Safari和Opera中的父元素后面.

W3.org的以下文本摘录描述了绘制z-index元素的顺序:

在每个堆叠上下文中,以下层按从前到后的顺序绘制:

形成堆叠背景的元素的背景和边界.

子堆叠上下文与负堆栈级别(最负面的).

流入的,非内联级别,非定位后代.

未定位的花车.

流入的,内联级的,未定位的后代,包括内联表和内联块.

堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代.

堆叠具有正堆栈级别的子堆栈(最少积极的第一个).

然而,听起来Chrome,FF,Safari和Opera可能会在父元素的背景(1)之前绘制负z-index元素(2).

在任何情况下,正如您所看到的,负面z-index元素非常靠近堆的底部,因此如果元素需要任何类型的用户交互,那么负面元素z-index可能不是最佳选择.

附加说明

它可能在IE而不是其他工作的另一个原因是IE倾向于将"空"元素视为不存在.因此,如果上面绘制了一些东西checkbox但它什么都没有(没有背景,内容等),那么IE将忽略它并允许与下面的元素进行交互 - 其他浏览器不会.

归档时间：	14 年，3 月前
查看次数：	4616 次
最近记录：	14 年，3 月前