html - CSS - 在滚动区域内将元素定位在另一个元素之上

Question

我有如下的html结构

<div id="scrolling-container">
    <div id="cover"></div>
    <div id="contents">
        A variable amount of iframes
    </div>
</div>

Here is the base jsbin explaining the issue.

我希望能够横向滚动#contents，但我希望它完全被透明元素 (#cover) 覆盖，我可以使用它来检测点击并允许在平板电脑上更轻松地横向滚动。

单独使用 css 应该可以做到这一点。 #cover { position:absolute,top:0,bottom:0,left:0,right:0} 似乎是去这里的方法，因为这是一种我已经使用了数十次的技术之前多次，但随着滚动，它不会一直向右延伸，而只是延伸到最初可见的滚动区域的尖端。当你滚动时，它不再覆盖元素

Here is a demonstration of the issue .尝试滚动容器，您会发现问题所在。

Answer 1

尝试将 div 的内容设置为 position: relative 然后使用伪元素生成封面:

演示:http://jsbin.com/arajag/1/edit

CSS:

div {
  border: 1px solid grey;
}

#scrolling-container {
  overflow-x: scroll;
  position: relative;
}
#contents {
  width: 400em;
  height: 10em;
  position: relative;
}

#contents:after {
  content: " ";
  position: absolute;
  z-index: 100;
  background-color: blue;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}

HTML:删除#cover

我知道封​​面上下有空隙，那是因为Chrome在内容前后设置了边距。无论如何，您都应该对此进行调整，所以我认为这不会成为问题。