CSS Positionnement et modèle de boite

Lorsque vous positionnez des éléments en position relative, il faut faire attention au modèle de boite.

Soit les div de classe carre, il sont dans une autre div, et positionnés avec top et left.

        .carre {
            box-sizing: border-box;
            // box-sizing: content-box;
            position: relative;
            width: 100px;            height: 100px;
            background: blue;            border:red solid 1px;
        }

box-sizing : content-box

Ici on prend en compte l’épaisseur de la bordure pour détermine la position de l’élément suivant.

box-sizing:border-box

Ici on ne tient pas compte de l’épaisseur des bordures pour détermine la position de l’élément suivant