Question

我已经实现了滚动功能，该功能在下部<div>元素中包含项目，因此这些项目不会与上部<div>元素重叠。但是，下部<div>的元素中有下拉菜单，并且这些菜单必须能够与上部<div>重叠一定程度，以便始终可以访问它们。我已经使用不同的z-index值实现了这一点，然后填充并移动了较低的<div>。

HTML

<html>
<body>
  <div class='container'>
    <div class='upper'></div>
    <div class='lower'>
      1<br>
      <div class='on-top'>ON TOP</div><br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
    </div>
  </div>
</body>
</html>

CSS

.container {
  height: 100%;
}

.upper {
  background-color: red;
  position: relative;
  z-index: 1;
  height: 100px;
}

.lower {
  background-color: blue;
  padding-top: 50px;
  top: -50px;
  position: relative;
  height: 100px;
  overflow-y: scroll;
}

.on-top {
  z-index: 2;
  position: absolute;
}

我的问题是，较低<div>的滚动条的顶部位于填充的顶部。因此，根据浏览器的不同，它们明显重叠在上部<div>中，或部分隐藏在上部<div>之后。我想在填充的末尾启动下部<div>的滚动条，以便它不会被上部<div>隐藏/重叠。

这是我在CSS文件中尝试的尝试，但没有成功（滚动条完全消失）：

.lower::-webkit-scrollbar {
  margin-top: 50px; /* Does not work */
}

JSFiddle：https://jsfiddle.net/axqLv7nu/37/

向滚动条添加垂直边距

0 个答案: