给出下面的例子
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>
为什么当按钮移出其父级时,它变得可点击?
EDIT:
I used transform: translateY(50px);
移动按钮,但是我们也可以使用position:relative;top:50px;
移动按钮但问题仍然存在。
在这里你面临着一个hidden问题和翻译/不透明度在这里无关。使用负数时z-index
就像你把你的元素放在了后面body
(因为这个有一个z-index
set to 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>
The body
是红色方块,所有元素都在它后面,按钮移动到底部,不再被主体覆盖。如果您使用其他属性移动按钮而不更改按钮,也会发生同样的情况body
height.
如果您向主体添加一些高度,平移不会改变任何内容,因为按钮将保留在主体后面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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)