Explication détaillée de l'utilisation de l'attribut position en HTML (quatre types)

Les quatre valeurs d'attribut​​de position :

1.relatif

2.absolu

3.fixé

4.statique

Ces quatre attributs sont décrits ci-dessous.

 <div id=parent> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>

L'attribut relatif est relativement simple. Nous devons déterminer de quel objet il est décalé. La réponse réside dans son emplacement. Dans le code ci-dessus, sub1 et sub2 sont dans une relation frère. Si vous définissez un attribut relatif de sub1, par exemple, définissez le code CSS suivant :

 #sub1{ position : relative ; remplissage : 5px ; haut : 5px gauche : 5px ;}

Nous pouvons comprendre que si l'attribut relatif n'est pas défini, la position de sub1 doit être à une certaine position selon le flux normal de documents. Mais lorsque la position de sub1 est définie sur relative, elle sera décalée en fonction de sa position supposée en fonction des valeurs haut, droite, bas et gauche. La signification relative de relatif se reflète également dans cela.

Pour cela, il vous suffit de vous rappeler où doit être sub1 si vous ne définissez pas de relatif, et de le décaler par rapport à l'endroit où il devrait être une fois qu'il est défini.

La question suivante est : où est la position de sub2 ? La réponse est où il se trouvait avant et où il se trouve maintenant. Sa position ne changera pas car sub1 ajoute l'attribut position.

Que se passera-t-il si la position de sub2 est également définie sur relative à ce moment-là ? A cette époque, c'est toujours le même que sub1, décalé selon sa position d'origine.

Notez que le décalage relatif est basé sur le côté supérieur gauche de la marge de l'objet.

Cette propriété est toujours trompeuse. On dit que lorsque l'attribut position est défini sur absolu, il est toujours positionné en fonction de la fenêtre du navigateur. C'est en fait faux. En fait, c’est une caractéristique des propriétés fixes.

Lorsque la position de sub1 est définie sur absolue, qui est-il utilisé comme objet à décaler ? Il y a deux situations ici :

(1) Lorsque l'objet parent de sub1 (ou l'arrière-grand-père, tant qu'il s'agit d'un objet parent), le parent définit également l'attribut de position et la valeur de l'attribut de position est absolue ou relative, c'est-à-dire qu'elle n'est pas la valeur par défaut, puis sub1 suit. Ce parent est utilisé pour le positionnement.

Notez que même si l'objet a été déterminé, certains détails nécessitent votre attention, à savoir quel point de positionnement du parent devons-nous utiliser pour le positionner ? Si le parent définit des attributs tels que margin, border, padding, etc., alors ce point de positionnement ignorera le remplissage et sera positionné à partir du début du remplissage (c'est-à-dire uniquement à partir du coin supérieur gauche du remplissage), c'est-à-dire qu'en ignorant le remplissage, bien sûr, il n'ignorera pas la marge et la bordure.

La question suivante est : où se trouve le sub2 ? Parce que lorsque la position est définie sur absolue, sub1 fera déborder le flux normal du document, comme s'il n'appartenait pas au parent, il flotte vers le haut. Cela s'appelle un calque dans DreamWeaver, mais cela signifie en fait la même chose. À ce stade, sub2 obtiendra la position de sub1 et son flux de documents n'est plus basé sur sub1, mais démarre directement à partir du parent.

(2) Si sub1 n'a pas d'objet parent avec un attribut de position, alors le corps sera utilisé comme objet de positionnement et positionné en fonction de la fenêtre du navigateur. C'est plus facile à comprendre.

Fixe est un absolu spécial, c'est-à-dire que fixe utilise toujours le corps comme objet de positionnement et est positionné en fonction de la fenêtre du navigateur. Même si la barre de défilement est déplacée, sa position ne changera pas. Semblable à background-attachment:fixed

Bien sûr, il ne semble pas y avoir de support sous Dreamweaver.

La valeur par défaut de position. Généralement, lorsque l'attribut de position n'est pas défini, il sera organisé selon le flux de documents normal.

Ce qui précède est l'utilisation de la position en HTML introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !