Кнопка zIndex -1 делает кнопку неактивной

Question

Я хочу, чтобы кнопка была интерактивной.

Вот песочница.https://codesandbox.io/s/m5w3y76mvy

Answer 1

Для номера Circle добавлено position: relative; z-index: 1;

и установите z-index для mytasks как 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 */
  }