Le problème, qui existe à la fois firefox et chrome, est que j'ai une toile avec un fond solide et une div avec une couleur / image de fond solide. La DIV est marinée au-dessus de la toile. Le div ne s'affiche pas sur la toile. Une note intéressante est que s'il y a du texte à l'intérieur de la Div, il sera correctement affiché. Cela signifierait que c'est un bug de navigateur ... dans les deux navigateurs. Voici un certain code pour les personnes qui souhaitent l'essayer. Donc, quiconque a des solutions de contournement? Ou y a-t-il quelque chose que j'ai manqué dans la spécification HTML5 qui dit que c'est correct? Comme une note, veuillez ne pas demander pourquoi je veux utiliser des marges au lieu d'alternatives fixes / absolues / etc. J'ai besoin de marges.
5 Réponses :
Ceci ne peut être corrigé que en appliquant le style: ou
Veuillez lire la question avant de répondre. J'ai dit que je ne veux pas de positionnement absolu ou relatif.
C'est malheureux, car le positionnement absolu et relatif est vraiment les seules options que vous avez.
Vous n'avez réellement pas besoin de positionner les éléments avec un positionnement relatif, il vous suffit d'ajouter la propriété. La position de votre div ne changera pas aussi longtemps que vous n'en ajoutez pas de haut , droite , etc ... attribut.
Ajout d'une position: relatif; (ou absolu) à #D semble fonctionner à la fois Chrome et Firefox. Aucune idée pourquoi, si vous me demandez. Est-ce bon pour vous?
Veuillez lire la question avant de répondre. J'ai dit que je ne veux pas de positionnement absolu ou relatif.
Cela m'a eu lieu récemment et au lieu de changer comment il est aménagé, je suis passé de fonctionne sur Firefox / Chrome / Safari.
N'ont pas été testés dans IE. div à l'aide d'un span avec Affichage: Inline-Block .
Utilisez le code suivant, espérons que cela vous aide:
<head>
<style type="text/css">
#c{background-color:#000;z-index:-1;position: fixed;}
#d{background-color:#aa00aa;margin-top:-50px;z-index:0;}
</style>
<script type="text/javascript">
function load() {
var cntx = document.getElementById("c").getContext("2d");
cntx.fillStyle = "rgba(255, 200, 200, 1)";
cntx.canvas.top = "0";
cntx.canvas.left = "0";
cntx.fillRect(0, 0, cntx.canvas.width, cntx.canvas.height);
var obj = document.getElementById("d");
obj.style.position = "fixed";
obj.style.top = 50;
obj.style.left = 0;
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
Eh bien, j'ai lu votre question, et je comprends que vous ne voulez pas utiliser la position ... Qui que vous ayez à utiliser la position pour obtenir z-index au travail. Position: Le relativement ne fait littéralement rien dans ce cas, sauvegardez ce que vous demandez. Voici une solution, bien qu'elle repose sur la position: relative http://jsfiddle.net/jalbertbowdenii/ar6sh/