CSS 如何使用相对/绝对定位来定位画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17265803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position canvas using relative/absolute positioning
提问by Vic Fanberg
I am having trouble setting the location of a canvas relative to another, so I wrote the following test harness.
我在设置画布相对于另一个画布的位置时遇到问题，所以我编写了以下测试工具。
I would expect that the positioning specified by "top" amd "left" in the div's at the top of the harness would move the origin of the canvases relative to each other.
我希望线束顶部的 div 中由“top”和“left”指定的定位会相对于彼此移动画布的原点。
What am I doing wrong?
我究竟做错了什么？
<!DOCTYPE html>
<html>
<head>
<form id='form1' style="position:relative">
<div id='d1' style="position:absolute; top:0; left:0; z-index:1">
<canvas id='canvas1' width='200' height='100'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d2' style="position:absolute; top:50; left:50; z-index:2">
<canvas id='canvas2' width='100' height='200'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d3' style="position:absolute; top:75; left:75; z-index:3">
<canvas id='canvas3' width='50' height='50'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input id='btn1' type="button" onClick="demoDisplay()" value="Hide canvas with display property">
<input id='btn2' type="button" onClick="demoVisibility()" value="Hide canvas with visibility property">
<input id='btn3' type="button" onClick="demoOrder()" value="Place blue over red">
</head>
<body onLoad="loadMe()">
<script>
function loadMe()
{
var canvas = document.getElementById("canvas1");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#8ed6ff');
grd.addColorStop(1,'#004cb3');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
var canvas = document.getElementById("canvas2");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#C00');
grd.addColorStop(1,'#D00');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
var canvas = document.getElementById("canvas3");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#00C');
grd.addColorStop(1,'#00D');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
}
function demoVisibility()
{
btn = document.getElementById('btn2')
if (btn.value==='Hide canvas with visibility property') {
btn.value = 'Show canvas with visibility property';
document.getElementById("d2").style.visibility="hidden";
} else {
btn.value = 'Hide canvas with visibility property';
document.getElementById("d2").style.visibility="visible";
}
}
function demoDisplay()
{
btn = document.getElementById('btn1')
if (btn.value==='Hide canvas with display property') {
btn.value = 'Show canvas with display property';
document.getElementById("d1").style.display="none";
} else {
btn.value = 'Hide canvas with display property';
document.getElementById("d1").style.display="inline";
}
}
function demoOrder()
{
btn = document.getElementById('btn3')
if (btn.value==='Place blue over red') {
btn.value = 'Place red over blue';
document.getElementById("d1").style.zIndex=2;
document.getElementById("d2").style.zIndex=1;
} else {
btn.value = 'Place blue over red';
document.getElementById("d1").style.zIndex=1;
document.getElementById("d2").style.zIndex=2;
}
}
</script>
</body>
</html>
回答by Jarrod
Add "px" to your style measurements. E.G top:50;=> top:50px;
将“ px”添加到您的风格测量中。EG top:50;=>top:50px;
<form id='form1' style="position:relative">
<div id='d1' style="position:absolute; top:0px; left:0px; z-index:1">
<canvas id='canvas1' width='200' height='100'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d2' style="position:absolute; top:50px; left:50px; z-index:2">
<canvas id='canvas2' width='100' height='200'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d3' style="position:absolute; top:75px; left:75px; z-index:3">
<canvas id='canvas3' width='50' height='50'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
回答by Vinod Kumar
I will make your life simple. Here is the javascript code for the same.
我会让你的生活变得简单。这是相同的javascript代码。
var can = document.querySelector('canvas');
can.style.position = 'absolute';
can.style.top = "100px";
can.style.left = "100px";
Well enjoy styling the page....
很好地享受设计页面的乐趣....
回答by John Davis
As a starter, your HTML is invalid. The content (HTML elements like <form>, <canvas>etc.) should be in a <body>tag inside the <html>tag! The <script>should probably be in the <head>.
首先，您的 HTML 无效。内容（HTML元素喜欢<form>，<canvas>等等）应该在<body>里面标签 <html>标签！在<script>大概应该是在<head>。
Also, note that the solution is using absolute positioning within an element using relative positioning.
另请注意，解决方案是在使用相对定位的元素内使用绝对定位。
