Question

我有一个具有position =“ absolute”类的按钮元素。这样可以防止单击按钮。一旦删除绝对位置，按钮的位置就会更改为我不希望的位置，但是单击会起作用。 z-index = -1用于按钮位于另一个组件上的情况。如何获得保持绝对位置和可点击位置的信息？

<button type="button" onclick="RandomFunction()" class="b-Crown"></button>

.b-Crown {
    cursor: pointer;
    padding-left: 25px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 15px;
    height: 26px;
    top: -163px;
    left: 265px;
    border-radius: 5px;
    background: #999;
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

Answer 1

将“ z-index: -1”更改为“ z-index: 1”

Answer 2

我猜是由于position:absolute使得对象出现在另一个对象的顶部/前面，同时您正在使用z-index:-1使得该位置再次从前面移回。因此，如果要将对象放在前面/顶部，请删除z-index，否则请删除position:absolute以使其位于另一个对象的后面

注意：另一个对象不应是静态的。这也取决于您设置样式的其他对象行为。

Answer 3

z-index在静态上不起作用，这就是为什么仅在将位置设为绝对位置时才可以单击按钮的原因，只需删除z-index或将位置更改为固定或相对

定义和用法

z-index属性指定元素的堆叠顺序。

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

注意：z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。

html绝对位置阻止onclick点击

3 个答案: