0

レイヤーを使用して2つのキャンバスを作成しようとしているこのシナリオがあるため、使用する必要がpositionあります..しかし、その下のものは...キャンバスの下に隠されています。DIV で次に来るものがキャンバスの BOTTOM になるようにするにはどうすればよいですか?

これが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;ます。コンバスの高さが 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 に答える