修复了 z-index 较低的元素与 Firefox 中的滚动条重叠答案

【问题标题】：Fixed element with lower z-index overlaps scrollbar in Firefox修复了 z-index 较低的元素与 Firefox 中的滚动条重叠
【发布时间】：2018-07-11 14:07:11
【问题描述】：

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

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

Here is the 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: 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（来自 sn-p）：

【问题讨论】：

对我来说，它在 firefox 和 chrome 上的工作方式相同。如果高度太小，列表会与固定的 div 重叠
@AlexVand 我添加了一张我从 Firefox 中的错误的 sn-p 视图中拍摄的图片
如果在滚动div上设置overflow-x:hidden;？
@AlexVand 不幸的是没有效果
我无法重现您的问题...这只是我正在考虑的事情

标签： css firefox flexbox cross-browser

【解决方案1】：

由于 Edge 也将 .item.fixed 呈现在滚动条的顶部，我不确定是 Firefox/Edge 还是 Chrome 是正确的。

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

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

Updated fiddle

堆栈sn-p

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

【讨论】：