Question

我翻遍所有互联网以寻找问题的答案： '如何真正识别页面上可见的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>

E.g。在这种情况下，我们正在寻找隐藏 id = 1 的元素。

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

Answer 1

如果您没有设置z-index， id = 2 的元素将位于 id = 1 的顶部，因为绿色矩形（id = 2）在红色（id = 1）之后定义。

如果你想隐藏绿色的那个，简单的添加＆＃34; z-index：-1;＆＃34;在div风格。由于默认的z-index为0。

参考文献：http://www.w3schools.com/cssref/pr_pos_z-index.asp

由于z-index导致元素可见性

1 个答案: