Alex Zhukovskiy Alex Zhukovskiy - 1 month ago 9
CSS Question

Unable to send canvas div to front

Question is very simple becuase there is sample markup which is showing a problem.

How can i make

input type="file"
clickable in following example? I tried to work with
z-index
but it seems to do nothing here.

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

Answer

You need to set position with z-index, or it will not work.

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