HTML5将div放在另一个div的顶部

Question

我需要将一个画布div放在图像div的顶部。我试过

#topCanvas {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

并且还有左/右边距但没有成功。这是JSFiddle - http://jsfiddle.net/yesprasoon/dSX7U/1

画布宽度和高度将保持不变，并且需要将水平/垂直中心与后部div对齐。我们可以放心地假设画布大小始终小于图像大小。

Answer 1

在div的背景中使用图像，然后将画布置于该div

中

<div id="topCanvas">
    <canvas id="countDown" width="60" height="60" >
</div>

<强> CSS

#topCanvas
    {
background-image:url('http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png');
   height: 180px;   //according to the image
    width: 800px;   //according to the image
}

#countDown{
position:absolute; 
left:50%;
top:50%;
margin-left: -30px;
margin-top: -30px;

}