これは私がフレキシボックスを持っている

Question

作業ドラッグを作るために0と1の間の不透明度を持っている必要がありDIVなぜ参照してください。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インデックスを必要としていることです。

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

Answer 1

#sqlsDragにZインデックスを追加：0と1の間の不透明度はまだ動作しますなぜ私はここに同様の質問が見つかったため、問題はまだ、生じるしかし

。

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