Флажки перекрываются в прокручиваемом столе с липкой головкой

Question

Я создаю прокручиваемую таблицу с фиксированным заголовком таблицы и флажками. Стол работал нормально (без перекрытия головы и тела стола) без флажка. С флажками все прокрутки строк просто отлично, за исключением того, что флажок в теле таблицы будет перекрываться с флажком (или отображаться) в заголовке таблицы.

Я пытался установить фон на белый, но не получилось.

Демонстрация выпуска : https://codesandbox.io/s/vm6l0p1vly

      <div
        style={{
          height: "500px",
          width: "100%",
          overflow: "auto",
          borderStyle: "solid",
          borderWidth: 1,
          borderColor: "lightGray"
        }}
      >
        <Table>
          <TableHead>
            <TableRow>
              <TableCell
                padding="checkbox"
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                <Checkbox />
              </TableCell>
              <TableCell
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                id
              </TableCell>
              <TableCell
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                name
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(row => (
              <TableRow key={row.id} hover>
                <TableCell padding="checkbox">
                  <Checkbox />
                </TableCell>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

Я ожидаю, что флажки не перекрываются.

Answer 1

У меня недостаточно очков, чтобы комментировать, но ответ заключается в том, чтобы установить z-index: 1 для заголовка, содержащего флажок.