个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
好的，伙计们，这是一个棘手的问题(也许):是否有任何方法可以获得元素的某种“全局 z-index”？这是我想做的一个例子:
给定两个元素引用，您将如何确定哪个在 z 顺序中更高(假定它们可能没有分配 z 索引或位于不同的容器中)
欢迎详细的黑客攻击!不那么详尽的方法不受欢迎。
最佳答案
这是一个有趣的问题。以下代码可能并非没有错误。我现在只是把它放在一起，还没有完全测试过。其目的是展示一种方法。
它比较两个元素并根据三个标准测试它们:
查看每个元素的祖先树，如果元素 A 具有 z-index 的第一个祖先的 z-index 大于元素 B 具有 z-index 的第一个祖先(如果有对于元素 B 完全存在)，那么元素 A 在 z 顺序中更高。
否则，如果元素 B 是元素 A 的后代，则元素 B 具有更高的 z 顺序。
否则，查看元素 A 和元素 B 共有的最后一个祖先的 sibling ，如果元素 A 的祖先在该共同祖先的子数组中排在第一位，则元素 B 具有更高的 z订单。
上面的逻辑可能有更简单的描述方式，算法也可以改进。 (例如，上面的第二个检查可以先完成。)但是，这是代码:
<html>
<head>
<script language="javascript">
function getAncestorsAsArray(element){
var arr = new Array();
arr.unshift(element);
while (arr[0].parentNode){
arr.unshift(arr[0].parentNode);
}
return arr;
}
function highestInitialZIndex(elementArr){
for (var i=0; i<elementArr.length; i++){
if (elementArr[i].style == undefined) continue;
var r = elementArr[i].style.zIndex;
if (!isNaN(r) && r!="") {
return r;
}
}
return undefined;
}
function findCommonAncestor(elementArr1, elementArr2){
var commonAncestor;
for (var i=0; i<elementArr1.length; i++){
if (elementArr1[i] == elementArr2[i]) {
commonAncestor = elementArr1[i];
}
}
return commonAncestor;
}
function findHighestAbsoluteIndex(element1, element2){
var arr1 = getAncestorsAsArray(element1);
var arr2 = getAncestorsAsArray(element2);
// Does an ancestor of one elment simply have a higher z-index?
var arr1Z = highestInitialZIndex(arr1);
var arr2Z = highestInitialZIndex(arr2);
if (arr1Z > arr2Z || (!isNaN(arr1Z) && isNaN(arr2Z))) return element1;
if (arr2Z > arr1Z || (!isNaN(arr2Z) && isNaN(arr1Z))) return element2;
// Is one element a descendent of the other?
var commonAncestor = findCommonAncestor(arr1, arr2);
if (commonAncestor == element1) return element2;
if (commonAncestor == element2) return element1;
// OK, which has the oldest common sibling? (Greater index of child node for an element = "older" child)
var indexOfCommonAncestor;
for (var i=0; i<arr1.length; i++){
if (arr1[i] == commonAncestor) {
indexOfCommonAncestor = i;
break;
}
}
for (var j=commonAncestor.childNodes.length; j>=0; j--){
if (arr1[indexOfCommonAncestor+1] == commonAncestor.childNodes[j]) return element1;
if (arr2[indexOfCommonAncestor+1] == commonAncestor.childNodes[j]) return element2;
}
}
function doTest(){
var e1 = document.getElementById("myDiv1");
var e2 = document.getElementById("myDiv2");
highest = findHighestAbsoluteIndex(e1, e2);
alert(highest.id);
}
</script>
</head>
<body onload="javascript:doTest();">
<div>
<div>
<div style="position:absolute; z-index:20;" id="myDiv1">
</div>
</div>
</div>
<div>
</div>
<div style="position:absolute; z-index:10;" id="myDiv2">
</div>
</body>
</html>
尝试使用正文中嵌套的 div 来测试它是否正常工作。
关于javascript - 确定绝对或全局 z-index？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5930224/
24
4
0
这个问题已经有答案了: 已关闭14 年前。 ** 重复:What's the difference between X = X++; vs X++;? ** 所以，即使我知道你永远不会在代码中真正做到
我在一本C语言的书上找到了这个例子。此代码转换输入数字基数并将其存储在数组中。 #include int main(void) { const char base_digits[16] =
尝试使用“pdf_dart”库保存 pdf 时遇到问题。 我认为问题与我从互联网下载以尝试附加到 pdf 的图像有关，但我不确定它是什么。 代码 import 'dart:io'; import 'p
我的 Apache 服务器曾经可以正常工作，但它随机开始对几乎每个目录发出 403 错误。两个目录仍然有效，我怎样才能使/srv/www/htdocs 中的所有目录正常工作？ 我查看了两个可用目录的权
这些索引到 PHP 数组的方法之间有什么区别(如果有的话): $array[$index] $array["$index"] $array["{$index}"] 我对性能和功能上的差异都感兴趣。 更
我有一个简单的结构，我想为其实现 Index，但作为 Rust 的新手，我在借用检查器方面遇到了很多麻烦。我的结构非常简单，我想让它存储一个开始值和步长值，然后当被 usize 索引时它应该返回 st
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。 请借助示例来解释差异。 最佳答案 这两个都是标量索引:特定类型的基于值的排序
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。 请借助示例来解释差异。 最佳答案 这两个都是标量索引:特定类型的基于值的排序
所以我有一个 df，我在其中提取一个值以将其存储在另一个 df 中: import pandas as pd # Create data set d = {'foo':[100, 111, 222],
我有一个由 codeigniter 编写的网站，我已经通过 htaccess 从地址中删除了 index.php RewriteCond $1 !^(index\.php|resources|robo
谁能告诉我这两者有什么区别: ALTER TABLE x1 ADD INDEX(a); ALTER TABLE x1 ADD INDEX(b); 和 ALTER TABLE x1 ADD INDEX(
我在 Firefox 和其他浏览器上遇到嵌套 z-index 的问题，我有一个 div，z-index 为 30000，位于 label 下方> zindex 为 9000。我认为这是由 z-inde
Link to the function image编写了一个函数来查找中枢元素(起始/最低)的索引 排序和旋转数组。我解决了这个问题并正在检查 边缘情况，它甚至适用于索引为零的情况。任何人都可以 解
我正在尝试运行有关成人人口普查数据的示例代码。当我运行这段代码时: X_train, X_test, y_train, y_test = cross_validation.train_test_spl
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点，然后还进行重写以强制 foo.com/index.php 成为 foo.com/
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点，然后还进行重写以强制 foo.com/index.php 成为 foo.com/
我有一个用户定义的函数，如下所示:- def genre(option,option_type,*limit): option_based = rank_data.loc[rank_data[
我有两个巨大的数据框我正在合并它们，但我不想有重复的列，因此我通过减去它们来选择列: cols_to_use=df_fin.columns-df_peers.columns.difference(['
感谢您从现在开始的回答， 我是React Native的新手，我想做一个跨平台的应用所以我创建了index.js: import React from 'react'; import { Co
我知道 not_analyzed 是什么意思。简而言之，该字段不会被指定的分析器标记化。 然而，什么是 NO_NORMS 方法？我看到了文档，但请用简单的英语解释我。什么是索引时间字段和文档提升和字段
我是一名优秀的程序员,十分优秀！