HTML 滾動時圖標溢出

Question

我不明白為什么滾動時圖標會重疊。 我已經使用過overflow: hidden並嘗試了各種隱藏它的方法。 例如，不同的divs應該隱藏一個圖標。

HTML：

<div class="container">
   <div class="bar">
      <div class="flex-item">ID</div>
      <div class="flex-item">Name</div>
      <div class="flex-item">Erfassung</div>
      <div class="flex-item">Frist</div>
      <div class="flex-item"><a href="logout.php"><img src="icons/logout_FILL0_wght400_GRAD0_opsz48.svg"></a></div>
   </div>
   <div class="data">
      <?php 
      while($row = $result->fetch_assoc()) {
      echo '<div class="dataRow" id="stat' . $row['Status'] . '">';
      echo    '<div class="flex-item">' . $row['ID'] . '</div>';
      echo    '<div class="flex-item">' . $row['Vorname'] . " " . $row['Nachname'] . '</div>';
      echo    '<div class="flex-item">' . $row['Erfassung'] . '</div>';
      echo    '<div class="flex-item">' . $row['Frist'] . '</div>';
      echo    '<div class="flex-item">' . '<a href="details.php?ID=' . $row['ID'] . '"><img src="icons/arrow_forward_ios_FILL0_wght400_GRAD0_opsz48.svg" overflow="hidden"></a>' . '</div>';
      echo '</div>';
      }
      ?>
   </div>
</div>

CSS：

.container {
    display: flex;
    flex-direction: column;
}

.bar {
    display: flex;
    flex-wrap: nowrap;
    font-weight: bold;
    top: 0;
    position: sticky;
    margin-bottom: 0.5em;
    background-color: #232323;
    padding-block: 0.25em;
    text-align: center;
    align-items: center;
    justify-content: center;
}

img {
    width: 2.15em;
    max-width: 2.15em;
    filter: invert(100%);
}

.data {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.dataRow {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.25em;
}

#stat1 {
    background-color: #c0161a;
}

#stat2 {
    background-color: #c4c41b;
}

#stat3 {
    background-color: #4cbb2d;
}

.flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-item:nth-child(1) {
    flex: 1;
    background-color: #373737;
    margin-right: 0.25em;
    padding: 0.5em;
}

.flex-item:nth-child(2) {
    flex: 5;
    background-color: #373737;
    margin-right: 0.25em;
    padding: 0.5em;
}

.flex-item:nth-child(3) {
    flex: 2;
    background-color: #373737;
    margin-right: 0.25em;
    padding: 0.5em;
}

.flex-item:nth-child(4) {
    flex: 2;
    background-color: #373737;
    margin-right: 0.25em;
    padding: 0.5em;
}

.flex-item:nth-child(5) {
    flex: 0.5;
    background-color: #373737;
}

如何防止重疊？ 這個想法是，當用戶滾動時，欄會粘在頂部並且沒有任何重疊。 所以酒吧總是在最上面。 包括圖標。 例子

Answer 1

問題：粘性 header 與內容處於同一 z-index 級別，這導致 header 和內容重疊。

解決方案：使用z-index告訴瀏覽器粘性 header 應該位於數據之上。 更多信息在這里。

CSS：

.container{
   z-index:2;
}
.bar{
   z-index:2;
}
.data{
   z-index:1;
}

Answer 2

你試過使用彈性網格嗎？ 它也許可以解決問題。