绝对定位div的内部位置：相对溢出：滚动div

Question

我们有一个水平滚动框列表，如下所示：

    

    ul {
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    li {
        display: inline-block;
        flex: 0 0 24%;
        max-width: 24%;
        margin-right: 1.3%;
        margin-top: 3px;
        height: 140px;
        position: relative;
        color: #000000;
        white-space: normal;
        text-align: left;
    }

    .container {
        white-space: nowrap;
        background: #fff;
        overflow-y: hidden;
        overflow-x: scroll;
        width: 100%;
        position: relative;
        height: 160px;
    }
    
    .cover {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 100%;
        background-color: #ffffff;
        z-index: 999;
    }

    .box {
        border: 1px solid #000;
    }

 <div class="container">
     <div class="cover">&nbsp;</div>
     <ul>
      <li class="box empty"></li>
      <li class="box gradient"></li>
      <li class="box gradient"></li>
      <li class="box gradient"></li>
      <li class="box gradient"></li>    
     </ul>
    </div>                               
              

如何在div水平滚动后将“ cover” div固定在右侧？现在，它停留在原始位置，如您在此屏幕截图中所见：

Answer 1

我有一个潜在的解决方案，但我需要将溢出内容放到<ul>上，将“ cover”移动到<ul>之后，并同时制作容器display: flex。然后，将“封面”放置在<ul>上方。

我还添加了background-color，以更好地演示该“封面”。

ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}

li {
  display: inline-block;
  flex: 0 0 24%;
  max-width: 24%;
  margin-right: 1.3%;
  margin-top: 3px;
  height: 140px;
  color: #000000;
  white-space: normal;
  text-align: left;
}

.container {
  white-space: nowrap;
  background: #fff;
  height: 180px;
  background-color: white;
  display: flex;
}

.cover {
  content: '';
  position: relative;
  left: -20px;
  width: 20px;
  height: 150px;
  background-color: tomato;
}

.box {
  border: 1px solid #000;
}

<div class="container">
  <ul>
    <li class="box empty"></li>
    <li class="box gradient"></li>
    <li class="box gradient"></li>
    <li class="box gradient"></li>
    <li class="box gradient"></li>
  </ul>
  <div class="cover"></div>
</div>