按钮上的 zIndex -1 使按钮无法点击

Posted 2023-02-22

【中文标题】按钮上的 zIndex -1 使按钮无法点击

【英文标题】：zIndex -1 on button is making button unclickable

【发布时间】：2019-06-16 23:43:14

【问题描述】：

我想让按钮可点击。

这里是沙盒。 https://codesandbox.io/s/m5w3y76mvy

【问题讨论】：

不要链接到外部站点，而是在问题本身中创建一个minimal, concrete, and verifiable example。同时，使用-1 中的zIndex 肯定会让您的按钮无法点击。你到底想达到什么目的？

增加圆圈的z-index而不是减少按钮之一

是否可以覆盖 .ContainedButtons-numberCircle-458 类的样式？

【参考方案1】：

为 numberCircle 添加 position: relative; z-index: 1;

并将 mytasks z-index 设置为 0 zIndex: "0" 我认为它会起作用。

检查整体风格

    mytasks: 
    color: "white",
    borderColor: "#2D9CDB",
    backgroundColor: "#2D9CDB",
    borderTopRightRadius: "18px",
    borderBottomRightRadius: "18px",
    borderTopLeftRadius: "18px",
    borderBottomLeftRadius: "18px",
    width: "200px",
    marginLeft: "-35px",
    zIndex: "0" /* changed to 0 */
  ,
  numberCircle: 
    borderRadius: "50%",
    behavior: "url(PIE.htc)" /* remove if you don't care about IE8 */,
    width: "15px",
    height: "15px",
    padding: "8px",
    background: "white",
    border: "2px solid #2D9CDB",
    color: "#2D9CDB",
    textAlign: "center",
    font: "16px Arial, sans-serif",
    float: "left",
    zIndex: "1",/* added */
    position: "relative"/* added */