Explication détaillée de la position CSS

De nombreuses autres propriétés CSS sont pour la plupart faciles à comprendre, telles que les polices, le texte, l'arrière-plan, etc. Certains livres CSS présenteront également ces propriétés simples en grande pompe, mais négligeront d'expliquer certaines propriétés difficiles, soupçonnées d'éviter l'important et de prendre la facilité. Les principales propriétés CSS difficiles à comprendre incluent la structure et le positionnement des boîtes. Tout comme la position est primordiale, cet article parlera principalement de la compréhension de la position et s'efforcera de vous donner la compréhension la plus complète de la position après avoir lu cet article.

Quatre valeurs d'attribut de position :

1. relative

2. absolue

3. fixe

4. statique

Les quatre propriétés sont décrites ci-dessous.

 

sub1

 

sub2

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 de 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 suivra le flux normal des documents, elle 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 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 la marge, la bordure, le remplissage, etc., alors ce point de positionnement ignorera le remplissage et sera positionné à partir de l'endroit où commence le remplissage (c'est-à-dire uniquement à partir du coin supérieur gauche du remplissage). est différent de ce que nous tenions pour acquis. L'idée de positionner l'extrémité supérieure gauche de la marge est différente.

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 de documents normal, comme s'il n'appartenait pas à Comme le parent, il flotte vers le haut. On l'appelle un « calque » dans DreamWeaver, mais cela signifie en réalité 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 le positionne en fonction de la fenêtre du navigateur.

4. statique

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

En cas de problème technique ou de présentation avec cet article, merci de laisser un message. Merci d'avoir lu!

Pour des explications plus détaillées sur la position CSS et les articles associés, veuillez faire attention au site Web PHP chinois !