HTML Icon overflow at scrolling

Question

I can't figure out why the Icons are overlapping when I'm scrolling. I've already used overflow: hidden and tried various methods of hiding it. E.g with different divs that should hide one Icon.

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;
}

How can I prevent the overlapping? The idea is that when the user is scrolling, the bar sticks to the top and nothing is overlapping. So the bar is always on top. Including the Icon. Example

Answer 1

Problem: The sticky header is on the same z-index level as the content, which causes the header and content to overlap.

Solution: Tell the browser that the sticky header should be on top of the data, by using z-index. More info here.

CSS:

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