Une analyse détaillée du positionnement du modèle de boîte CSS

cssModèle de boîte positionnement

1 Statique positionnement

. La valeur par défaut de l'élément HTML , ce qui signifie qu'il n'y a pas de positionnement et que l'élément apparaît dans le flux normal. Les éléments positionnés
Statiques ne seront pas affectés par haut, bas, gauche, droite.

2. Positionnement fixe

La position de l'élément est une position fixe par rapport à la fenêtre du navigateur.
Il ne bouge pas même si la fenêtre défile :

Le positionnement fixe positionne l'élément indépendamment du flux de documents, il ne prend donc pas de place.
Les éléments positionnés fixes se chevauchent avec d'autres éléments.

3. Positionnement relatif

Le positionnement d'un élément positionné relativement est relatif à sa position normale.

Le contenu des éléments positionnés relativement qui peuvent être déplacés et des éléments qui se chevauchent ne modifiera pas l'espace qu'ils occupent à l'origine. Les éléments

positionnés relativement sont souvent utilisés comme blocs conteneurs pour les éléments positionnés absolument.

4. Positionnement absolu

La position d'un élément positionné de manière absolue est relative à l'élément parent positionné le plus proche. Si l'élément n'a pas d'élément parent positionné, alors sa position. est Relatif à :

Le positionnement absolu positionne l'élément indépendamment du flux du document, il ne prend donc pas de place.
Les éléments positionnés de manière absolue se chevauchent avec d'autres éléments.

Éléments qui se chevauchent
les éléments sont positionnés indépendamment du flux de documents, afin qu'ils puissent couvrir d'autres éléments de la page
z-index L'attribut précise l'ordre d'empilement d'un élément (quel élément doit être devant ou derrière)
Un élément peut avoir un ordre d'empilement positif ou négatif :
L'élément avec un ordre d'empilement supérieur est toujours dans L'avant des éléments d'ordre d'empilement inférieurs.
Remarque : Si deux éléments positionnés se chevauchent et qu'aucun z-index n'est spécifié, le dernier élément positionné dans le code HTML sera affiché en premier.

La différence entre le positionnement relatif et absolu

Positionnement absolu (absolu) :
1. Le objet qui se verra attribuer ce positionnement. La méthode sera attribuée à partir de Faites-le glisser hors du flux de documents et utilisez les attributs gauche, droite, haut, bas et autres pour effectuer un positionnement absolu par rapport à son objet parent le plus proche avec le plus de paramètres de positionnement si le parent de l'objet ne définit pas le positionnement. attributs, il suit toujours le positionnement HTML. S'il est régulier, il sera positionné en fonction du coin supérieur gauche de l'objet body comme référence.
2. Les objets positionnés de manière absolue peuvent être empilés et l'ordre d'empilement peut être contrôlé via l'attribut z-index est un entier sans unité, avec le plus grand en haut et peut. ont des valeurs négatives.
Par rapport au positionnement du flux non standard le plus proche, la position d'origine disparaît et est remplacée par la position suivante

Positionnement relatif (relatif) :
Par rapport à la position d'origine, mais la position d'origine reste .
Les objets ne peuvent pas être empilés et leurs positions sont décalées dans le flux normal de documents en fonction des attributs gauche, droite, haut, bas et autres.
Vous pouvez également utiliser une conception en couches z-index.

[Tutoriel] Bien comprendre le mode boîte CSS quatre (positionnement absolu et positionnement relatif)

Exemple :

<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*多个标签同时设置，使用逗号分隔*/
        body, p, ul, li, img, a {
            margin: 0;
            padding: 0;
        }

        /*给定图片尺寸：否则会超出父容器，堆叠在一起*/
        img {
            width: 100%;
            height: 100%
        }

        /*让a标签绝对于li标签，li要设置relative*/
        li {
            list-style: none;
            position: relative;
            float: left;
            padding: 1%;
            width: 18%;
        }

        /*让删除红叉处于li的右上角，且需给定大小*/
        a {
            background: url(images/close.png);
            width: 16px;
            height: 16px;
            position: absolute;
            top: 0;
            right: 0;
        }</style>

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!