Comment la position de la toile à l'aide relatif/absolu de positionnement
J'ai du mal à la définition de l'emplacement d'une toile par rapport à l'autre, j'ai donc écrit à la suite de l'atelier de test.
Je m'attends à ce que le positionnement spécifié par "top" amd "gauche" dans le div est au dessus de la ceinture serait se déplacer à l'origine des toiles les uns par rapport aux autres.
Ce que je fais mal?
<!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>OriginalL'auteur Vic Fanberg | 2013-06-23
Vous devez vous connecter pour publier un commentaire.
Ajouter "px" à votre style de mesures. E. G
top:50;=>top:50px;OriginalL'auteur Jarrod
Comme un starter, votre code HTML n'est pas valide. Le contenu (éléments HTML comme
<form>,<canvas>etc.) doit être dans un<body>balise à l'intérieur de la<html>tag! Le<script>devrait probablement être dans le<head>.Notez également que la solution est d'utiliser le positionnement absolu au sein d'un élément à l'aide de positionnement relatif.
OriginalL'auteur John Davis