由于 z-index 跟踪元素可见性答案

【问题标题】：Tracking element visibility due to z-index由于 z-index 跟踪元素可见性
【发布时间】：2016-12-03 00:32:21
【问题描述】：

我翻遍了所有互联网以找到问题的答案： '如何真正识别页面上可见的 HTML 元素'。隐藏元素的方法很少，我们可以跟踪它的可见性：

使用 css 样式“显示：无”。
使用 css 样式“可见性：隐藏”。
使用 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，因为之前您使用的是“覆盖”一词，它在 CSS 中具有特定含义。我认为这更好地概括了您的问题。如果没有，请随意回滚。

标签： javascript jquery html css

【解决方案1】：

如果不设置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

【讨论】：