Fixer cette valeur de propriété sur absolue fera sortir l’objet du positionnement absolu du flux normal du document, quel que soit le dispositif du contenu autour. Si d’autres objets ayant des propriétés d’indice z différentes occupent déjà une position donnée, ils ne s’affecteront pas mutuellement, mais se chevaucheront dans la même position. L’objet n’a pas de tache extérieure (marge), mais possède tout de même une tache intérieure (bordure) et une bordure (bordure).
Pour activer le positionnement absolu d’un objet, vous devez spécifier au moins un des attributs gauche, droite, haut, bas et définir cette valeur d’attribut sur absolue. Sinon, les attributs ci-dessus utiliseront leur valeur par défaut auto, ce qui fera que l’objet suivra les règles normales de mise en page HTML et sera rendu immédiatement après l’objet précédent.
Les attributs TRBL (HAUT, DROITE, BAS, GAUCHE) ne sont valides que si l’attribut position est défini.
Vous devriez définir position : absolue
Si le parent (infini) ne définit pas l’attribut position, alors l’absolue courante est positionnée en combinaison avec l’attribut TRBL en haut à gauche du navigateur comme point d’origine
Si le parent (infini) définit la propriété de position, alors l’absolue actuelle est positionnée en combinaison avec la propriété TRBL dans le coin supérieur gauche du parent (récent) comme point d’origine.
Lors de la définition de la position : relative
Le coin supérieur gauche de la zone de contenu parent (récent) est le point original combiné avec l’attribut TRBL (ou décalage par rapport à l’élément précédent de l’élément positionné dans la zone de contenu parent), et le coin supérieur gauche du CORPS est le point original sans le parent. Le positionnement relatif ne peut pas être superposé. Lorsqu’on utilise le positionnement relatif, l’élément occupe toujours son espace d’origine, qu’il soit déplacé ou non. Ainsi, déplacer un élément fait qu’il écrase d’autres boîtes.
De manière générale, si la page web est centrée, il est facile de faire des erreurs en utilisant Absolute, car la page web s’est toujours adaptée automatiquement à la taille de la résolution, tandis qu’Absolute utilisera le coin supérieur gauche du navigateur comme point d’origine et ne changera pas la position due au changement de résolution. Parfois, il est également nécessaire de s’appuyer sur l’indice z pour établir la relation entre le haut et le bas du conteneur, plus la valeur est grande, plus le sommet est élevé, et la plage numérique est un nombre naturel. Bien sûr, il faut noter que la relation parent-enfant ne peut pas être définie avec un indice z, et que le niveau enfant doit être au-dessus et en dessous du parent.
Définir cette valeur de propriété sur relative maintient l’objet dans le flux HTML normal, mais sa position peut être décalée en fonction de son objet précédent. Le texte ou les objets suivant un locateur relatif occupent leur propre espace sans couvrir l’espace naturel de l’objet positionné. En revanche, le texte ou l’objet après l’objet de positionnement absolu occupe son espace naturel avant que l’objet ciblé ne soit arraché hors du flux normal du document. Placer un objet de positionnement absolu en dehors de la fenêtre de vue fait apparaître une barre de défilement. Placer un objet de positionnement relatif en dehors de la zone de visionnement n’apparaît pas avec une barre de défilement. En fait, le principal problème du positionnement est de se souvenir de la signification de chaque positionnement. Le positionnement relatif est la position initiale de l’élément « par rapport » au flux du document, tandis que le positionnement absolu est l’élément ancêtre qui a été positionné « par rapport » au plus récent.
Voici les ajouts :
Bien que je connaisse le positionnement absolu (absolu) et relatif du CSS, je n’ai jamais écrit les effets pertinents moi-même !
Après avoir travaillé plus d’une demi-journée, cela peut être considéré comme terminé ! J’ai aussi compris certains de ces deux attributs !
Le résumé est le suivant :
Examinons d’abord la structure des couches suivante
<body>
<id de la div=posi>
<div id=rel> Cette couche ne s’applique qu’à position :relative ; Style </div>
<div id=abs> Cette couche ne s’applique qu’à position :absolue ; Style </div>
<div id=sss> n’applique <div>pas les styles
</div>
</body>
1. Absolu : n’occupe pas de siège, relatif : a une place !
Comme la superstructure :
Les calques avec id rel occupent une ligne lorsqu’elles sont affichées ! La couche d’ABS derrière n’apparaîtra que sur la ligne suivante !
Lorsque le calque avec l’ID ABS est affiché, il chevauchera l’ID du SSS derrière !
2. Par défaut (non positionné en combinaison avec le haut, etc.), l’absolu (positionnement absolu) est positionné par la couche mère
Par exemple, si le calque ci-dessus avec ID est ABS, s’il n’est pas positionné en combinaison avec TOP, sa position d’affichage sera avec le calque parent POSI (POSI se trouve dans le coin inférieur gauche du document, et il sera aussi dans le coin inférieur gauche)
3. En combinant les attributs haut, bas, droite, gauche et autres, l’absolu (positionnement absolu) est positionné avec la fenêtre comme positionnement, et le relatif est décalé avec sa propre occupation comme base ! Voici :
<body>
<id de la div=posi>
<div id=sss> n’applique <div>pas les styles
<div id=rel> Cette couche applique position :relative ; bas : 30px ; Style </div>
<div id=abs> Cette couche ne s’applique qu’à position :absolue ; bas : 30px ; Style </div>
</div>
</body>
Code ci-dessus :
La couche avec le rel id monte et chevauche la couche avec le SSS id
Le calque avec ID ABS sera déplacé à une position à 30 pixels de la fenêtre, la fenêtre servant de base !
4. Lorsque vous combinez les attributs haut, bas, droite, gauche et autres, si vous voulez que l’absolu (positionnement absolu) utilise la couche mère comme base de positionnement, vous pouvez appliquer des attributs absolus ou relatifs sur la couche parente ! Voici :
<body>
<div id=posi style="position :relative">
<div id=rel> Cette couche applique position :relative ; bas : 30px ; Style </div>
<div id=abs> Cette couche ne s’applique qu’à position :absolue ; bas : 30px ; Style </div>
</div>
</body>
Le code ci-dessus : id est la couche de Posi, vous pouvez aussi utiliser l’attribut absolu !
l’id est la couche de REL, qui n’est pas affectée, et est décalée par son propre lieu de placement comme base !
La couche avec l’ID comme ABS est basée sur le bord inférieur de la couche POSI comme base de positionnement ; si la hauteur de la couche POSI est inférieure à 30px à ce moment-là, la couche ABS pourrait ne pas la voir !
|
Publié sur 30/10/2014 14:39:28
|
|
|
