0

我有这种情况，我试图用图层做两个画布，所以我必须使用position等等..但是..它下面的东西......隐藏在画布下面。我怎么做才能让 DIV 中的下一个出现在画布的底部？

这是 JSfiddle：http: //jsfiddle.net/qtjua/

4

2 回答 2

1

只需将画布的“宽度”和“高度”设置为“#screen”。

#screen {
 position: relative;
 border: 4px solid #333;
 /* New stuff */
 width: 512px
 height: 352px;
}

这是 jsFiddle：http: //jsfiddle.net/THkmG/3/

希望能帮助到你！

于 2012-07-09T03:31:32.747 回答
0

是的，你的“Hello World”。消息落后了，因为你<div id="screen">有position:relative;并且你的 convas 高度是 352px，所以你可以在你的消息 div 中使用 252px 的边距顶部。这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>stackoverflow</title>
<style type="text/css">

#screen {position:relative;border:4px solid #333;}
#canvas {
            background:#ABABAB;
            margin:0;padding:0;
            width:512px;
            height:352px;
            }
</style>


</head>

<body>
<div id="screen">
 <canvas id="canvas" width="512" height="352" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

 <canvas id="drawing" width="512" height="352" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

</div>
<div style="float:left; margin: 352px 0 0;">Hello World.</div>
</body>
</html>
于 2015-10-29T11:30:51.447 回答