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

【问题标题】：Absolute positioned div inside position:relative overflow:scroll div绝对定位的 div 内部位置：相对溢出：滚动 div
【发布时间】：2018-12-05 01:55:56
【问题描述】：

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

    

    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固定在右侧？目前它卡在原来的位置，从这个截图可以看出：

【问题讨论】：

您的 sn-p 不起作用，它已损坏。显示空列表。
已修复，现在可以查看
How to make the "cover" div fixed on the right after the div has scrolled horizontally 这是什么意思？能不能详细点？
以全页模式运行 sn-p：“cover” div 在 div 的右侧。然后尝试水平滚动项目：您会看到“封面” div 不再位于右侧，而我希望它固定在容器的右侧。

标签： html css layout css-position

【解决方案1】：

我有一个潜在的解决方案，但我需要将溢出放在<ul> 上，将“封面”移到<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>

【讨论】：