0

I have a flexbox please see: jsfiddle.net

When I set #sqlDrag.opacity == 0 or 1, and mouse over the div, it does not show, else works if opacity between 0 and 1 exclusive:

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

If I remove opacity, it also does not work.

Tested same result with FF and Chrome

Updated:

Thanks for K.Daniek

The problem is that the div is overlapped and need z-index.

However the problem still arising why opacity between 0 and 1 still works, because I found a similar question here:

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

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
SIDU
  • 2,258
  • 1
  • 12
  • 23

1 Answers1

0

Add z-index into #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>
kind user
  • 40,029
  • 7
  • 67
  • 77
  • 1
    99?! Dang! Save some z-index for the rest of us. :) – Steve Sep 30 '16 at 00:26
  • Thanks for remind, i should have realized z-index. Yes you have pointed out the right problem. However I have new question, why opacity between 0 and 1 also works? – SIDU Sep 30 '16 at 00:28