CSS flottant avec chevauchement
J'essaie de mettre en place une structure d'onglet horizontale simple pour une page sur laquelle je travaille, et j'ai des problèmes avec les div flottants combinés avec z-index.
Affichage du code suivant dans un navigateur:
<!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>Untitled Document</title>
<style type="text/css">
#main { width: 500px; z-index: 1;}
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="main">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
<br />
RIGHT
</div>
<div class="clear"></div>
</div>
</body>
</html>
Pourquoi la bordure orange du div gauche ne chevauche-t-elle pas la bordure verte du div droit?
4 réponses
La propriété z-index ne s'applique pas aux éléments positionnés statiquement. Pour utiliser z-index, le CSS doit également inclure toute valeur de position autre que statique (c'est-à-dire relative, absolue, fixe).
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }
Vous donnera ce que vous voulez, je pense. J'ai ajouté position: relative; et changé le z-index de la .gauche à 3 (de 2) et a changé l'indice z de .droit à 2 (de 3).
z-index n'a aucun effet sur les éléments qui ne sont pas en position (par exemple position:absolute;)
Utilisez la propriété position pour l'élément supérieur. Ajouter position:relative à .left.
Négatif margin-left?
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}