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

我有一个包含复选框的div.在某些时候,这个div的z-index是负数和相对的postition,在这种情况下,在最新版本的Chrome,FF,Safari或Opera中无法访问该复选框.但是,该复选框在IE9中可以访问.绝对和固定同样适用于静态工作.

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

我可以假设非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>

解决方法

静态工作的原因是因为z-index仅应用于定位元素 – 绝对,相对,固定.

我相信在这个例子中,IE可能已经使z-index正确.您所描述的问题听起来像复选框被放置在Chrome,Safari和Opera中的父元素后面.

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

Within each stacking context,the following layers are painted in back-to-front order:

the background and borders of the element forming the stacking context.

the child stacking contexts with negative stack levels (most negative first).

the in-flow,non-inline-level,non-positioned descendants.

the non-positioned floats.

the in-flow,inline-level,non-positioned descendants,including inline tables and inline blocks.

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

the child stacking contexts with positive stack levels (least positive first).

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

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

附加说明

它可能在IE而不是其他工作的另一个原因是IE倾向于将“空”元素视为不存在.因此,如果在复选框上方绘制了一些内容但它不包含任何内容(没有背景,内容等),那么IE将忽略它并允许与下面的元素进行交互 – 其他浏览器不会.

原文链接：https://www.f2er.com/html/231680.html

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

解决方法

猜你在找的HTML相关文章