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

Cet article présente principalement l'utilisation de la position en HTML. L'article présente les quatre valeurs d'attribut​​de position une par une. Les amis intéressés peuvent suivre l'éditeur pour y jeter un œil. valeurs d'attribut​​de position :

1.relative

3.fixed
4.static

Ce qui suit décrit respectivement ces quatre attributs.

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

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 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;
}

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

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.

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.

fixed est un absolu spécial, c'est-à-dire quefixe utilise toujours le corps comme objet de positionnement et est positionné en fonction de la fenêtre du navigateur, même s'il est glissé et défilé, sa position ne changera pas. Semblable à background-attachment:fixed

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

. la position n'est généralement pas définie. Les attributs seront organisés selon le flux normal des documents.

RésuméCe qui précède est l'utilisation de la position en HTML introduite par l'éditeur. J'espère que cela sera utile à tout le monde. !

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!