gpt4 book ai didi

html - 如何计算 HTML 元素的有效 z-index

转载 作者:技术小花猫 更新时间:2023-10-29 12:41:32 24 4
gpt4 key购买 nike

我想通过代码确定 html 页面上元素的 z-index。我正在使用 jQuery。

jQuery 将允许我使用 $(element).css("z-index") 检查应用的 z-index。如果 z-index 没有直接在该元素上设置,则 Firefox 返回“auto”而 IE 返回“0”。该节点的有效 z-index 取决于其容器的 z-index。

我想我可以通过查看节点及其父节点来计算有效的 z-index,直到找到 z-index 值。问题是,至少在 IE 上,我无法将 z-index 为 0 的元素与将继承其父级 z-index 的元素区分开来,因为在这两种情况下 .css("z-index") 返回 0 . 关于如何计算元素的实际 z-index 有什么想法吗?

如果你想做实验,你可以使用这段代码。在 IE 上它将输出“0”、“0”、“0”、“300”。在 Firefox 上,它将输出“auto”、“auto”、“0”、“300”。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<script type="text/javascript">
alert($("<div></div>").css("z-index"));
alert($("<div style='position:relative'></div>").css("z-index"));
alert($("<div style='z-index:0'></div>").css("z-index"));
alert($("<div style='z-index:100'></div>").css("z-index"));
</script>

</body>
</html>

最佳答案

on IE, I cannot disambiguate an element with a z-index of 0 from an element who will inherit the z-index of its parent

您正在寻找具有有效 z-index 的元素。 z-index 仅对具有 position 样式而不是 static 的元素有效。因此,您应该查找父元素,直到找到 z-indexautopositioned 元素。

(这将为您提供最内层的 z-index。堆叠上下文可以嵌套,因此您可能希望通过查看要定位的最远祖先来查看最外层的 z-index。)

在 IE6-7 上,没有 z-index 的元素会错误地收到 0 的自动 z-index。所以当你在 IE6-7 中查看没有 z-index 的定位元素时,这确实会给你一个 0 读数......这可能是错误的,但它反射(reflect)了IE 的渲染已经是错误的,无论如何您都必须避免或解决。

(在 IE8 中,这最终得到了修复,您确实会在第一个警报中获得 auto,假设有合适的 doctype/EmulateIE 设置将其发送到 IE8 native 模式。)

关于html - 如何计算 HTML 元素的有效 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2024124/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com