html - 按底层 div 的大小选择 div

Question

我有一个关于通过另一个 div 的大小选择 div 的问题。

我有两层div。顶层包含几个小方块（DIV TYPE 1），底层只有一个具有特定大小的 div（DIV TYPE 2）。

现在，当我“激活”DIV TYPE 2（例如，激活可以是链接）时，我只想选择位于 DIV TYPE 2 上方的 DIV TYPE 1 方格，以便隐藏它们，这将使 DIV TYPE 2 可见.

[IMG]http://i41.tinypic.com/2ik3zi0.jpg[/IMG]

Answer 1

http://codepen.io/ColoO/pen/tfGap

使用 javascrit 并更改 div 类型 1 的 z-index 属性。您需要放置 div 的绝对位置。

HTML

<div id="main">
  <div id="type1">type1</div>
  <div id="type2">type2</div>
</div>

<a href="#" onClick="type1()">appear type 1</a> |
<a href="#" onClick="type2()">appear type 2</a>

CSS

#main {
  background:grey;
  width:400px;
  height:300px;
  position:relative;
  z-index:-12;
}

#type1{
  position:absolute;
  background: pink;
  top:10px;
  left:10px;
  height:100px;
  width:100px;
  z-index:2;

}

#type2{
  position:absolute;
  background: red;
  top:20px;
  left:20px;
  height:100px;
  width:100px;


}

JAVASCRIPT

function type2() {

  document.getElementById('type1').style.zIndex = -3;

}

function type1() {

  document.getElementById('type1').style.zIndex = 2;

}

如果你想消失 div 改变 "style.zIndex = -3;" 通过 "style.display = "none";" 在 javascript