为什么这个div需要在0和1之间具有不透明度才能使拖动工作

Question

我有一个弹性箱，请参阅：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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;