在 Firefox 中具有较低 z-index 的固定元素与滚动条重叠

Question

我创建了一个 div 的可滚动列表，底部有一个固定元素。当高度太小时，列表应该与固定的 div 重叠。它适用于 Chrome，但在 Firefox 中，固定的 div 与列表中的滚动条（并且仅与滚动条）重叠。

为什么会这样，我该如何解决这个问题？

.menuehead{
  background: #DDD;
  position: fixed;
  width: 100%;
  height: 40px;
  min-height: 40px;
  border: 2px solid black;
}
.scrolldiv{
  height: calc(100vh - 42px);
  width: 200px;
  margin-top: 42px;
  background: #AAA;
  position: fixed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1002;
}
.scrolldiv .fixed.item{
  position: fixed;
  bottom: 0px;
  background: #DDA;
  width: 198px;
  z-index: 2;
}
.scrolldiv :nth-child(2n)
{
  background: #ADD;
}
.scrolldiv :nth-child(2n-1)
{
  background: #DAD;
}
.item{
  width: calc(100% - 2px);
  height: 42px;
  min-height: 42px;
  border: 1px solid black;
  z-index: 3;
}
body{
  margin: 0;
}

<div class="menuehead">HEAD</div>
<div class="scrolldiv">
  <div class="item">FIRST</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">LAST</div>
  <div class="item fixed">FIX</div>
</div>

Firefox 58.0.1 中错误的黄色 div（来自代码段）：

Answer 1

由于 Edge 也在滚动条顶部渲染 .item.fixed，我不确定 Firefox/Edge 或 Chrome 谁是正确的。

由于滚动条实际上属于scrolldiv，我认为Chrome是错误的

因为 .item.fixed 是 .scrolldiv 的子元素，应该放在它的底部，而不是使用 position: absolute，你会得到相同的跨浏览器结果，其中滚动条完全可见。

Updated fiddle

堆栈片段

.menuehead{
  background: #DDD;
  position: fixed;
  width: 100%;
  height: 40px;
  min-height: 40px;
  border: 2px solid black;
}
.scrolldiv{
  height: calc(100vh - 42px);
  width: 200px;
  margin-top: 42px;
  background: #AAA;
  position: fixed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1002;
}
.scrolldiv .fixed.item{
  position: absolute;                  /*  changed  */
  bottom: 0px;
  background: #DDA;
  width: 100%;                         /*  changed  */
  box-sizing: border-box;              /*  added  */
  z-index: 2;
}
.scrolldiv :nth-child(2n)
{
  background: #ADD;
}
.scrolldiv :nth-child(2n-1)
{
  background: #DAD;
}
.item{
  width: calc(100% - 2px);
  height: 42px;
  min-height: 42px;
  border: 1px solid black;
  z-index: 3;
}
body{
  margin: 0;
}

<div class="menuehead">HEAD</div>
<div class="scrolldiv">
  <div class="item">FIRST</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">LAST</div>
  <div class="item fixed">FIX</div>
</div>

在 Firefox 中具有较低 z-index 的固定元素与滚动条重叠

Fixed element with lower z-index overlaps scrollbar in Firefox

css

firefox

cross-browser

flexbox