utilisation de la position en CSS

Quatre valeurs d'attribut de position :

1.relative

2.absolute

3.fixed

4.static

Ces quatre attributs sont décrits ci-dessous.

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

1. relatif

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

Nous pouvons le comprendre de cette façon. L'attribut relatif n'est pas défini, la position de sub1 Selon le flux normal du document, il devrait être dans une certaine position. 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 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.

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 attributs 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. L'attribut de position n'est pas défini, ce sera comme d'habitude. Organisez le flux de documents.

Ce qui précède est le contenu de l'utilisation de la position en CSS. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !