Qu'est-ce que le positionnement absolu en CSS

En CSS, le positionnement absolu est une méthode de positionnement qui rend la position d'un élément indépendante du flux documentaire. La zone d'élément définie sur le positionnement absolu est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur ; par défaut, la position en position absolue est relative au navigateur et est positionnée en conjonction avec le haut, la droite, le bas et la gauche.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, le positionnement absolu est une méthode de positionnement qui rend la position d'un élément indépendante du flux documentaire.

Une boîte d'élément définie sur un positionnement absolu est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur, qui peut être un autre élément du document ou le bloc conteneur initial. Par défaut, la position de positionnement absolue est relative au navigateur et est positionnée en haut, à droite, en bas et à gauche.

L'espace précédemment occupé par l'élément dans le flux documentaire normal est fermé, comme si l'élément n'existait pas. L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal.

Apprenons-en davantage sur le positionnement absolu (absolu) en détail. En fait, le positionnement absolu absolu et le flotteur flottant sont partiellement similaires ; si vous pouvez comprendre le flottement flottant, il sera d'une grande aide pour comprendre le positionnement absolu absolu.

Parlons d'abord des similitudes entre absolu et float : wrapping et hautement trompeur

wrapping

On dit qu'une image vaut mille mots (la seule différence est : le p dans l'image ci-dessous a ajouté un absolu)

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

Une fois que vous ajoutez un absolu ou un float à un élément, cela équivaut à ajouter display:block à l'élément. Qu'est-ce que ça veut dire? Par exemple, la largeur par défaut de l'étendue de l'élément en ligne est adaptative et cela ne fonctionnera pas si vous y ajoutez de la largeur. Pour définir la largeur, vous devez définir la durée sur display:block. Mais si vous ajoutez un absolu ou un float à span, l'attribut d'affichage de span deviendra automatiquement block et la largeur pourra être spécifiée. Par conséquent, si vous voyez absolu/float et display:block apparaître en même temps dans CSS, alors display:block est un code CSS redondant.

Grande tromperie

Dans l'exemple ci-dessus, l'absolu est ajouté au p sur la couche externe de l'image, de sorte que le degré élevé de tromperie ne peut pas être bien reflété. Déplacez l'absolu vers l'image intérieure et l'effet viendra. out :

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

Si vous avez lu l'explication détaillée de CSS float, vous constaterez que l'effet est le même. Mais les principes qui les sous-tendent sont en réalité différents et pas exactement les mêmes. Vous pouvez le voir en ajoutant du texte :

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
  我是一个绝对定位的absolute元素
</p>

D'après l'image, il est évident que le texte est recouvert par l'image, ce qui est différent du float. float fait croire à l'élément parent que sa hauteur s'est réduite, mais l'élément float lui-même est toujours dans le flux de documents et le texte entourera l'élément float et ne sera pas masqué.

Mais l'absolu ne peut plus être considéré comme trompant l'élément parent, mais a une relation de niveau. Si l'élément parent dans le flux normal de documents est considéré comme mortel, alors l'absolu est devenu immortel. Dans les termes actuels, il n'est plus dans la même dimension. Du point de vue de l'élément parent, l'image définie sur absolue a complètement disparu, le texte est donc affiché à l'extrême gauche. Le niveau absolu est élevé, l’image recouvre donc le texte.

Je me souviens de la première fois que je suis entré en contact avec CSS, qui était encore un salaud avec une puissance de combat de 5, et je savais que l'absolu pouvait avoir le concept de hiérarchie, je pensais à tort que je l'avais complètement compris. Pensez-y, c'est vraiment déroutant (bien sûr, ce n'est pas une mauvaise chose. Chaque fois que vous sentez que votre passé était comme un morceau de tofu, cela signifie que vous avez fait des progrès. D'un autre côté, si vous pensez toujours à comment vous étiez à l'époque, cela signifie que vous vous reposez encore sur vos lauriers.)

Après avoir acquis les bases ci-dessus, vous devez également comprendre les caractéristiques suivantes de l'absolu

• Comment déterminer le point d'ancrage
• et l'amour et la mort relatifs
• La relation avec z-index
• Réduire le coût du redessin et reflow

Comment déterminer le point d'ancrage

Une fois l'absolu superposé, la première question qui se pose est de savoir où laisser le navigateur afficher l'élément. Pour les éléments du flux de documents ordinaire, le navigateur peut calculer la position de l'élément en fonction de la taille et de la position de ses éléments parent, enfant et frère. Mais que faire après le layering ? L'idée de base est la suivante :

Premier cas : l'utilisateur spécifie uniquement absolu pour l'élément, mais ne précise pas gauche/haut/droite/bas. À ce stade, la position du point d'ancrage du coin supérieur gauche de l'élément absolu est la position de l'élément dans le flux de documents normal. Comme dans l'illustration ci-dessus, l'image panda est le premier enfant de l'élément parent, donc le point d'ancrage du coin supérieur gauche est le coin supérieur gauche du contenu de l'élément parent.

Si vous modifiez l'ordre de l'image panda et du texte ci-dessous et en faites le deuxième enfant de l'élément parent, une image vaut mille mots :

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况：用户给absolute元素指定了left/right，top/bottom

先简单点，让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的，即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

只指定top时，元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

只指定bottom时，元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
</p>

通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方，天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是（好吧，我承认，这是我战5渣渣时的认识。如果你是弗利萨，可以鄙视这句话）：relative主要用于限制absolute

上面已经说了，如果absolute元素没有position:static以外的父元素，那将相对body定位，天空才是它的极限。而一旦父元素被设为relative，那absolute子元素将相对于其父元素定位，就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

通常的做法是将APP图片所处的p设成relative，然后红色圈圈设成absolute，再设top/right即可。这样无论用户怎么改变APP图片的位置，红色圈圈永远固定在右上角，例如：

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="img/25/2.jpg" / alt="Qu'est-ce que le positionnement absolu en CSS" >
  <span class="tipIcon">6</span>
</p>

这样做效果是OK的，兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式，具体选用哪个方案是见仁见智的。我比较看重的标准：一个是简洁，另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法，应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移，但父层p并不需要任何位置偏移，之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业，顺便陪客户聊聊天，但纯聊天聊完一个钟，恐怕会被投诉。

（学习视频分享：css视频教程）

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!