html - CSS - 在能够滚动的同时定位绝对溢出父级

Question

我正在尝试加载水平滚动的 div。每个 div 都是绝对定位的(我示例中的红色框)，因此它在滚动容器外可见。我有一个效果很好的例子，但似乎我已经失去了滚动的能力。出现滚动条，但滚动它不会移动 div。

通过添加相对于整个容器的位置，我可以让 div 滚动，但它们不会显示在容器之外。

请帮助我能够在容器外显示内容并保持可滚动性。

    <div style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px; position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>
    </div>

Answer 1

我稍微编辑了您的代码片段并向黑色容器添加了一个类，以便轻松地为其直接子级设置样式:

.container > div {
  border: 1px solid green;
}

.container > div {
  border: 1px solid green;
}

<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px; position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>
    </div>

现在您应该能够看到滚动确实起作用了，但只针对绿色 div。其他元素(黑色边框 div 和红色 div)不滚动，因为它们具有 position: absolute;。这意味着它们被排除在文档流之外，并且由于没有其他元素具有 position: relative，因此它们相对于正文是绝对相对的。这就是为什么，如果您使用主滚动条滚动，它们实际上会滚动。

您可以将 position: relative; 添加到容器中，但如您所说，这样做元素不会溢出容器。

据我所知，仅使用 css 是无法解决这个问题的，您可能必须让它们滚动浏览一些 Javascript。

一个非常基本的例子:

const container = document.querySelector('.container');
const boxes = document.querySelectorAll('.box');

container.addEventListener('scroll', (e) => {
  let offset = e.target.scrollLeft;
  for(let box of boxes) {
    box.style.transform = `translateX(${offset}px)`;
  }
});

.container > div {
  border: 1px solid green;
}

.fake-width {
  width: 2000px;
}

.boxes {
  display: flex;
}
.box {
  background: blue;
}

.box + .box {
  margin-left: 50px;
}

<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
  <div class="fake-width"></div>

</div>

<div class="boxes">
<div class="box box-1" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>

<div class="box box-2" style="display:inline-block; margin-left:50px; width:500px; height:40px">
  </div>
  
  <div class="box box-3" style="display:inline-block; margin-left:50px; width:500px; height:40px">

  
</div>
</div>

</div>

如您所见，如果采用这种方式，您甚至不需要将 div 保留在滚动容器中。您可以，具体取决于您要构建的内容，但您不需要。