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

Question

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

为什么会出现这种情况？如何解决此问题？

Here is the fiddle

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

由于Edge也会在滚动条顶部呈现.item.fixed，因此我不确定Firefox / Edge或Chrome是否正确。

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

由于.item.fixed是.scrolldiv的孩子，并且应该位于其底部，而是使用position: absolute，并且您将获得相同的结果跨浏览器，其中滚动条完全可见。

Updated fiddle

Stack snippet

.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>