HTML Icon overflow at scrolling-CodePudding

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 >
   <div >
      <div >ID</div>
      <div >Name</div>
      <div >Erfassung</div>
      <div >Frist</div>
      <div ><a href="logout.php"><img src="icons/logout_FILL0_wght400_GRAD0_opsz48.svg"></a></div>
   </div>
   <div >
      <?php 
      while($row = $result->fetch_assoc()) {
      echo '<div  id="stat' . $row['Status'] . '">';
      echo    '<div >' . $row['ID'] . '</div>';
      echo    '<div >' . $row['Vorname'] . " " . $row['Nachname'] . '</div>';
      echo    '<div >' . $row['Erfassung'] . '</div>';
      echo    '<div >' . $row['Frist'] . '</div>';
      echo    '<div >' . '<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

CodePudding user response：

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

CodePudding user response：

have you try to use flex grid? it can maybe solve the problem.