Quelles sont les utilisations de la position en HTML ? Introduction à l'utilisation de la position

Ce que cet article vous apporte, c'est quelles sont les utilisations de la position en html ? L'introduction à l'utilisation du poste a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Quatre valeurs d'attribut de position :

1.relative
2.absolute
3.fixed
4.static
Les quatre attributs sont décrits ci-dessous .

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

1. L'attribut relatif 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 fraternelle. Si vous définissez un attribut relatif pour sub1, par exemple, définissez le code CSS suivant :

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

Nous pouvons le comprendre de cette façon. , 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 de haut, de droite, de bas et de gauche. Le sens « relatif » 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 en fonction de l'endroit où il devrait être une fois qu'il est défini.
La question suivante est : où est la position du 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 ? 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.

2. absolu

Cet attribut est toujours trompeur. 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 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 d'attribut de position est absolu ou relatif, également C'est-à-dire que si ce n'est pas la valeur par défaut, sub1 sera positionné en fonction de ce parent.

Notez que bien que l'objet ait été déterminé, certains détails nécessitent votre attention. C'est à dire 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ù est la position du 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. C'est ce qu'on 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.

3.fixed

fixed est un absolu spécial, c'est-à-dire quefixed prend 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 est : Cela ne changera pas. Semblable à background-attachment:fixed
Bien sûr, il ne semble pas être pris en charge sous Dreamweaver

4 static

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

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!