javascript, css z-index, div empilage
Je veux créer une sorte de lumière/épaisseur de la boîte qui n'agit que sur un seul DIV dans une page.
Lors de la mine de feux d'envoi de la première div(phantom_back) agit comme je le veux, mais la deuxième, phantom_top définit son auto après phantom_back indépendamment de son z-index et de positionnement.
Ce que je fais mal?
Voici ce que j'ai à ce jour:
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.zIndex = 100;
document.getElementById('phantom_back').style.height = '100%';
document.getElementById('phantom_back').style.width = '100%';
phantom_top();
}
function phantom_top(image)
{
document.getElementById('phantom_top').style.zIndex = 102;
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.top = 0;
document.getElementById('phantom_top').style.left = 0;
}
//-->
</script>
</head>
<body>
<a href="#" onclick="phantom_back()">Change</a>
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div>
</div>
</body>
</html>
J'errais pourquoi aucun des tutoriels que j'ai pu trouver d'offrir quelque chose de ce genre.
OriginalL'auteur aggitan | 2009-02-09
Vous devez vous connecter pour publier un commentaire.
Donc, je l'ai eu. J'ai défini un positionnement absolu sur phantom_back et au lieu d'essayer de réorganiser l'ordre je viens de mettre la visibilité. Quand j'ai essayé de mettre le z-index effondrerait sur moi.
OriginalL'auteur aggitan
phantom_top est en position:relative, pas absolue, par conséquent, il est pour l'instant pas de chevauchement phantom_back.
j'ai mal lu. fixe.
OriginalL'auteur Jason
N'oubliez pas de concaténer un px de la chaîne de la hauteur et de la largeur. Vous n'avez pas besoin de la px pour z-index
Comme ça.
OriginalL'auteur Slain