Question

给出以下示例

function clickme() {
  console.log(' button been clicked')
}

.d1,
.d2 {
  border: 1px solid red;
  z-index: -99;
  opacity: .5;
  position: relative;
}

.d2>button {
  transform: translateY(50px);
}

<div class="d1">
  <button onclick="clickme();">Click Me</button>
</div>
<br>
<div class="d2">
  <button onclick="clickme();">Click Me</button>
</div>

为什么当按钮移到其父项之外时，它可以单击？

编辑：

我使用transform: translateY(50px);移动按钮，但是我们也可以使用position:relative;top:50px;移动按钮，但问题仍然存在。

Answer 1

在这里，您正面临隐藏问题，此处的翻译/不透明度无关。使用负数z-index时，就像您将元素置于body后面一样（因为该元素的z-index设置为auto）。然后，body的高度由其流入内容（两个div）定义，并通过简单地使用平移将元素放置在身体下方，因此我们可以到达它并单击它。

让我们添加一些边框/背景以更好地查看问题：

function clickme() {
  console.log(' button been clicked')
}

.d1,
.d2 {
  border: 1px solid red;
  z-index:-1;
  position: relative;
}

.d2>button {
  transform: translateY(50px);
}

body {
 background:rgba(255,0,0,0.5);
 border:2px solid;
}
html {
  background:blue;
}

<div class="d1">
  <button onclick="clickme();">Click Me</button>
</div>
<br>
<div class="d2">
  <button onclick="clickme();">Click Me</button>
</div>

body是红色正方形，您所有的元素都在其后面，并且按钮移至底部且不再被主体覆盖。如果您使用其他属性移动按钮而不更改body高度，也会发生同样的情况。

如果您在身体上增加一些高度，则平移不会发生任何变化，因为按钮将保留在body后面

function clickme() {
  console.log(' button been clicked')
}

.d1,
.d2 {
  border: 1px solid red;
  z-index: -1;
  position: relative;
}

.d2>button {
  transform: translateY(50px);
}

body {
 height:100vh;
}

<div class="d1">
  <button onclick="clickme();">Click Me</button>
</div>
<br>
<div class="d2">
  <button onclick="clickme();">Click Me</button>
</div>

z-index怪异行为？

1 个答案: