css - 为什么这个 div 需要有 0 到 1 之间的不透明度才能使拖动工作

Question

我有一个 flexbox 请看:jsfiddle.net

当我设置#sqlDrag.opacity == 0 或 1，并将鼠标悬停在 div 上时，它不显示，否则如果不透明度介于 0 和 1 之间则有效:

.flex {
  display: flex;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.flexCol {
  flex-flow: column;
}
.flexAuto {
  flex: 1 1 auto;
}
#sqlsDrag {
  margin-bottom: -6px;
  height: 6px;
  cursor: row-resize;
  flex-shrink: 0;
  background: #f00;
  opacity: .5;
  /* why this have to be between 0 and 1? */
}

<div class="flex flexCol flexAuto">
  <textarea>select now()</textarea>
  <div id="sqlsDrag"></div>
  <div id="main" class="flexAuto">
    why #sqlDrag.opacity == 0 or 1 does not show, else works
  </div>
  <!-- main -->
</div>

如果我删除不透明度，它也不起作用。

用 FF 和 Chrome 测试了相同的结果

更新:

感谢 K.Daniek

问题是div是重叠的，需要z-index。

但是问题仍然存在，为什么 0 和 1 之间的不透明度仍然有效，因为我在这里发现了一个类似的问题:

What has bigger priority: opacity or z-index in browsers?

Answer 1

将 z-index 添加到#sqlsDrag。

.flex{display:flex;min-height:0;min-width:0}
.flexCol{flex-flow:column}
.flexAuto{flex:1 1 auto}
#sqlsDrag{margin-bottom:-6px;height:6px;cursor:row-resize;flex-shrink:0;background:#f00;opacity:1;
z-index: 99;
}

  <div class="flex flexCol flexAuto" style="position:relative">
    <textarea>select now()</textarea>
    <div id="sqlsDrag"></div>
    <div id="main" class="flexAuto">
      why #sqlDrag.opacity == 0 or 1 does not show, else works
    </div><!-- main -->
  </div>