canvas divを前面に送ることができません

問題を示しているサンプルマークアップがあるので、質問は非常に簡単です。canvas divを前面に送ることができません

input type="file"を次の例でクリックするとどうなりますか？私はz-indexと仕事をしようとしましたが、ここで何もしないようです。

<html> 
    <div style="z-index: 0"> 
     <img src="#" width="350" style="position: absolute;" /> 
     <canvas width="350" style="border: thick; position: absolute"></canvas> 
    </div> 

    <div style="z-index: 10"> 
     <input type="file" /> 
    </div> 
</html>

出典

2016-10-24 Alex Zhukovskiy

。 'z-index'はそれがなければ動作しません。 – putvande

positionにz-indexを設定する必要があります。そうしないと効果がありません。あなたの `div`sに` position`を追加する必要が

// HTML 
<div class="canvas"> 
    <img src="#" width="350" /> 
    <canvas width="350"></canvas> 
</div> 

<div class="file"> 
    <input type="file" /> 
</div> 

// CSS 
.canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

.file { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
}

http://codepen.io/paulcredmond/pen/yakkkY

出典

2016-10-24 13:06:46

canvas divを前面に送ることができません

答えて

関連する問題