为什么这个 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>