Position absolue, quelqu'un peut-il expliquer cela

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

Question

Voici un extrait de code CSS dont j'ai besoin d'explication: 

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Ok, donc c'est le positionnement absolu d'une image, évidemment.

  1. top est comme un bourrage du haut, non?
  2. que font les 50% restants?
  3. pourquoi la marge de gauche est-elle à -445px?

Mise à jour: largeur est 860px. L'image réelle est 100x100 si cela fait une différence ??

Était-ce utile?

La solution

  1. En haut correspond à la distance depuis le haut de l'élément HTML ou, s'il s'agit d'un autre élément avec une position absolue, du haut.

  2. & amp; 3. Cela dépend de la largeur de l'image, mais cela peut servir à centrer l'image horizontalement (si la largeur de l'image est de 890 pixels). Il existe cependant d'autres moyens de centrer une image horizontalement. Plus généralement, cela est utilisé pour centrer un bloc de hauteur connue verticalement (c'est le moyen le plus facile de centrer quelque chose de hauteur connue verticalement): 

    top: 50%
margin-top: -(height/2)px;

Autres conseils

Cela a probablement été fait pour centrer l'élément sur la page (à l'aide de technique "centre mort" .

Cela fonctionne comme ceci: en supposant que l'élément ait une largeur de 890px, il est réglé sur position: absolu et à gauche: 50% , ce qui place son gaucher bord situé dans le centre du navigateur (bon, cela pourrait être le centre d'un autre élément avec position: relative ).

Ensuite, la marge négative est utilisée pour déplacer le bord gauche vers la gauche sur une distance égale à la moitié de la largeur de l'élément , en le centrant ainsi.

bien sûr, cela ne le centrera peut-être pas exactement (cela dépend de la largeur de l'élément, il n'y a pas de width dans le code que vous avez collé, il est donc impossible d'en être sûr) mais l'élément par rapport au centre de la page

  

top est comme un remplissage en haut à droite?

Oui, le haut de la page.

  

que font les 50% restants?

Cela déplace le contenu au centre de l'écran (100% serait tout à fait à droite.)

  

pourquoi la marge gauche est-elle à -445px?

Après l'avoir déplacé avec "gauche: 50%", cela le déplace de 445 pixels vers la gauche.

L'extrait ci-dessus concerne un élément (par exemple, un div, un span, une image ou autre) avec un identifiant de section.

L'élément a une image d'arrière-plan blah.png qui se répète dans les directions x et y.

Le bord supérieur de l'élément sera positionné à 0px (ou à toute autre unité) à partir du haut de son élément parent si celui-ci est également positionné de manière absolue. Si le parent est la fenêtre, ce sera sur le bord supérieur de la fenêtre du navigateur.

L'élément aura son bord gauche positionné à 50% de la gauche du bord gauche de son élément parent.

L'élément sera alors "déplacé". 445px à partir de ce point de 50%.

Vous saurez tout ce que vous devez savoir en consultant le CSS. modèle de boîte

Lorsque position est absolue, top est la distance verticale du parent (probablement la balise body, donc 0 est le bord supérieur de la fenêtre du navigateur). Left 50% est la distance du bord gauche. La marge négative le déplace vers la gauche de 445 pixels. Quant à savoir pourquoi, votre proposition est aussi bonne que la mienne.

Au risque de ressembler à Capitaine Évident, je vais essayer de l'expliquer aussi simplement que possible.

Haut est un nombre qui détermine le nombre de pixels que vous souhaitez qu'il soit du début de l'élément HTML situé au-dessus de celui-ci ... ne correspond donc pas nécessairement au haut de votre page. Méfiez-vous de votre formatage HTML lors de la conception de votre css.

Votre gauche à 50% devrait le déplacer au centre de votre écran, étant donné qu'il s'agit de 50. N'oubliez pas que les utilisateurs ont des tailles d'écran différentes et sont affectés au (0,0) en haut à gauche de votre image, pas au centre. afin qu’elle ne soit pas parfaitement placée au centre de l’écran, contrairement à ce à quoi vous pouvez vous attendre.

C’est la raison pour laquelle la marge laissée à -445 pixels est utilisée - pour la déplacer plus loin, fixée.

Bonne chance, j'espère que cela a du sens. J'essayais de reformuler mon explication différemment au cas où d'autres réponses vous causeraient encore des difficultés. C'étaient d'excellentes réponses aussi.

(Si vous avez deux moniteurs de tailles différentes, je vous suggère de contourner le code pour voir comment chaque modification affecte des écrans de tailles différentes!)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top