javascript - 通过 z-index 跟踪元素可见性

我翻遍了整个互联网来寻找问题的答案: '如何真正识别页面上可见的 HTML 元素'。有几种方法可以隐藏元素，我们可以跟踪它的可见性:

使用 CSS 样式“display:none”。
使用 CSS 样式“visibility:hidden”。
使用 CSS 样式“opacity:0”。
使用 CSS 样式“position:absolute”并添加样式“top:-%SOME_PIXELS%px”或“left:-%SOME_PIXELS%px”。

但是我遇到了一些有趣的情况:我们正在寻找放置在绝对定位的其他元素下的可见性的元素

示例:

<html>
<body>

<div id="1">
 <span>
   <div style='width:300px;height:250px;background-color:red ;'></div>
 </span>
</div>

 <div style="position:absolute;top:8px;left:8px;" id="2">
   <span>
     <div style='width:300px;height:250px;background-color:green ;'></div>
   </span>
 </div>

 </body>
</html>

例如在本例中，我们正在寻找 id=1 似乎被隐藏的元素。

在这种情况下，如何在没有 z-index 的情况下跟踪可见性？

最佳答案

如果不设置z-index，则带有id=2的元素将位于id=1的顶部，因为绿色矩形(id=2 ) 在红色 (id=1) 之后定义。

如果你想隐藏绿色的，只需添加“z-index: -1;”在div样式中。由于默认 z-index 为 0。

引用文献:http://www.w3schools.com/cssref/pr_pos_z-index.asp

关于javascript - 通过 z-index 跟踪元素可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40936436/