绝对定位 div inside position:relative overflow:scroll 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 .然后 "cover" 相对定位在 <ul> 上方。

我还添加了一个 background-color 来更好地展示 "cover" 演示。

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>

绝对定位 div inside position:relative overflow:scroll div

Absolute positioned div inside position:relative overflow:scroll div

html

css

layout

css-position