Explication détaillée de la position en CSS (exemple de code)

Le contenu de cet article est une explication détaillée (exemple de code) sur la position en CSS. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

La propriété CSS position est polyvalente et puissante. Il permet de définir ou de modifier la position d'un élément. Il a 4 valeurs possibles : statique (par défaut), relative, absolue, fixe. (Cours recommandé : Tutoriel vidéo CSS)

Il est généralement utilisé avec 4 attributs de coordonnées : gauche, droite, haut, bas

statique

Il s'agit de la valeur de position par défaut : les éléments statiques suivent simplement le flux naturel. Ils ne sont affectés par aucune valeur gauche, droite, supérieure ou inférieure.

relatif

Lorsque la position est définie sur relative, l'élément peut se déplacer en fonction de sa position actuelle.

<p>汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</p>
<p>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
<p>姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。缓歌慢舞凝丝竹，尽日君王看不足。渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>

p{ border: 1px solid blue;}

L'effet est le suivant :

Continuons à regarder :

<p>九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。君王掩面救不得，回看血泪相和流。黄埃散漫风萧索，云栈萦纡登剑阁。</p>
<p class="second">峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。行宫见月伤心色，夜雨闻铃肠断声。天旋地转回龙驭，到此踌躇不能去。马嵬坡下泥土中，不见玉颜空死处。</p>
<p>君臣相顾尽沾衣，东望都门信马归。归来池苑皆依旧，太液芙蓉未央柳。芙蓉如面柳如眉，对此如何不泪垂。春风桃李花开日，秋雨梧桐叶落时。</p>

p{ border: 1px solid blue;}
.second{ position: relative;border:1px solid red; left: 20px; top: 10px;}

L'effet est le suivant :

La bordure rouge est déplacée de 20 pixels depuis la gauche et de 10 pixels depuis le haut, par rapport à sa position naturelle, là où elle devrait être .

A noter que le paragraphe bleu n'a pas bougé du tout. En utilisant le positionnement relatif, le paragraphe rouge peut être déplacé librement sans casser la mise en page. La seule chose qui est inappropriée est que tous les autres éléments, sauf lui-même, ne savent pas que l'élément a bougé.

absolu

Lorsque la position est définie sur absolue, les éléments peuvent se déplacer en fonction du premier élément positionné.

"Positionnement ? Qu'est-ce qu'un élément positionné ?"

Un élément positionné est une position dont la valeur est relative, absolue ou fixe. Par conséquent, un élément est positionné sauf si sa position est indéfinie ou statique.

La caractéristique d'un élément positionné est qu'il sert de point de référence à ses éléments enfants.

Imaginons une hiérarchie simple :

<section>
  I&#39;m in position relative.
  <p>
    I&#39;m in position absolute!
  </p>
</section>

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative; /* This turns the <section> into a point of reference for the <p> */
}
p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute; /* This makes the <p> freely movable */
  bottom: 10px; /* 10px from the bottom */
  left: 20px; /* 20px from the left */
}

L'effet est le suivant :

La hauteur du la partie jaune mesure 200 pixels et sa position est définie sur relative, ce qui en fait le point de référence pour tous les éléments enfants.

Lorsque la position du paragraphe vert est définie sur absolue, il peut se déplacer librement en fonction de la partie jaune. En définissant les valeurs inférieure et gauche, il se déplacera vers le coin inférieur gauche.

Que se passe-t-il si on met à gauche et à droite ?

Si la largeur n'est pas définie, appliquer left: 0 et right: 0 étirera l'élément sur toute la largeur. Cela équivaut à définir gauche : 0 et largeur : 100 %.

Si la largeur est définie, la droite supprime la valeur.

fixe

Lorsque la position est définie sur fixe, cela fonctionne comme un positionnement absolu : vous pouvez définir les coordonnées gauche/droite et haut/bas.

La seule différence est que le point de référence est la fenêtre. Cela signifie que l'élément fixe ne défile pas avec la page ; il est fixé à l'écran.

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!