web-dev-qa-db-fra.com

CSS flottant avec chevauchement

J'essaie de mettre en place une structure d'onglets horizontale simple pour une page sur laquelle je travaille, et je rencontre 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 de la division gauche ne chevauche-t-elle pas la bordure verte de la division droite?

cssz-indexcss-float
30
Michael

la propriété z-index ne s'applique pas aux éléments positionnés statiquement. Afin d'utiliser le 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é la position: relative; et changé le z-index du .left à 3 (de 2) et changé le z-index de .right à 2 (de 3).

65
Joshua Shannon

z-index n'a aucun effet sur les éléments qui ne sont pas positionnés (par exemple position:absolute;)

8
Brian Behrend

Utilisez la propriété position pour l'élément upper. Ajouter position:relative à .left.

2
Gelio

Négatif margin-left?

.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}
0
BenB