SIDU SIDU - 2 months ago 6
CSS Question

Why this div need to have opacity between 0 and 1 to make drag working

I have a flexbox please see: https://jsfiddle.net/ny07fsbg/

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:

HTML

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

CSS

.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? */
}


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?

Answer

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>

Comments