html位置绝对阻止onclick点击[重复]

Posted 2023-03-06

【中文标题】html位置绝对阻止onclick点击[重复]

【英文标题】：html position absolute prevents onclick from clicking [duplicate]

【发布时间】：2019-06-01 00:23:36

【问题描述】：

我有一个带有 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);

【问题讨论】：

删除你的z-index: -1; ... 或者让它在顶部而不是底部。原因是定位，当元素不是static（默认值）时，它就会启动。

@LGSon 是不是因为position:absolute 使对象出现在另一个对象的顶部/前面，而z-index:-1又从前面重新定位。

@HimanshuAhuja 是的，因为如果元素没有 position 而不是 static（或作为弹性/网格项目），z-index 将不起作用

谢谢！ z-index：-1；是故意的。我希望这个按钮位于另一个组件的后面。如果我将 z-index 更改为 1，我可以解决并调整宽度以仍然能够看到我想要显示的部分。再次感谢！

我从未使用过flex，但不知何故已经看到了 flex 的效果，好像溢出相似达到了一些最佳的 flex 剪切并显示它内联不确定 flex

【参考方案1】：

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

【讨论】：

欢迎来到 SO。不要只是放弃“将这个改成那个”答案，还要解释它为什么有效。

【参考方案2】：

我猜是由于position:absolute 使对象出现在另一个对象的顶部/前面，同时您正在使用z-index:-1 这使得该定位再次从前面返回。所以删除z-index，如果你想要前面/顶部的对象，否则删除position:absolute，使其在另一个对象后面

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

【讨论】：

你不能这么说，因为当涉及到position 和z-index 时，你不知道另一个元素有什么。阅读第一个欺骗链接，它解释了它是如何工作的

所以，你是说如果另一个对象定义了一些定位，那么绝对将起作用，否则静态没有变化，就像你需要有位置：相对同步工作

请阅读第一个欺骗链接的答案，它解释得很好。

那是我所说的正确@LGSon 我已经阅读了欺骗的答案，以便看到 z-index 生效，您需要将定位设置为绝对定位，而相对于另一个定位没有意义只有 zindex:-1 为一个，+1 为另一个

【参考方案3】：

z-index 不适用于静态，这就是为什么您的按钮只有在您将位置设为绝对时才可点击，您只需删除 z-index 或将位置更改为固定或相对

定义和用法

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

具有较大堆栈顺序的元素始终位于具有>较低堆栈顺序的元素之前。

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。