web-dev-qa-db-fra.com

Que signifie "haut: 0; gauche: 0; bas: 0; droite: 0;" signifier?

Je lis un guide de ce site sur une technique de centrage des éléments.

J'ai lu le code CSS,

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Et j'ai lu l'explication aussi.

Mais ce que je ne comprends pas, c'est la partie qui explique "en haut: 0; à gauche: 0; en bas: 0; à droite: 0;".

Ça dit,

Réglage haut: 0; gauche: 0; en bas: 0; à droite: 0; donne au navigateur un nouveau cadre de délimitation pour le bloc. À ce stade, le bloc remplira tout l'espace disponible dans son parent de décalage, qui est le corps ou la position: relative; récipient. Developer.mozilla.org: pour les éléments positionnés de manière absolue, les propriétés haut, droite, bas et gauche spécifient les décalages par rapport au bord du bloc contenant l'élément (à quoi l'élément est positionné par rapport).

Qu'est-ce que ça veut dire? Boîte de délimitation? Remplissez tout l'espace disponible?

Comment "haut: 0; gauche: 0; bas: 0; droite: 0;" travail? faut-il prendre les 4 côtés d'une boîte et les étirer pour remplir le récipient? Est-ce ainsi que les valeurs fonctionnent?

Que se passe-t-il réellement lorsque je mets "haut: 0; gauche: 0; bas: 0; droite: 0;"?

Je suis complètement perdu à cette explication et j'aimerais que quelqu'un reformule, reformule et m'explique de manière plus simple et compréhensible.

Je vous remercie.

htmlcsscss-position
18
Johnsy

Que se passe-t-il lorsque vous utilisez left et right (ou top et bottom) à l'heure identique est déroutant car la spécification [ 6.3. Positionnement absol ] nous dit que:

Pour les éléments au positionnement absolu dont le bloc conteneur est basé sur un élément de niveau bloc, cette propriété est un offset du bord de remplissage de cet élément.

Alors, comment la position peut-elle affecter la taille d'un élément? La raison vient de la façon dont les largeurs sont calculées, qui est enterrée dans une autre section de la spécification, [8.1. La largeur des éléments absolus ou fixes positionnés, non remplacés] .

Si vous spécifiez à la fois left et right et que width de votre élément est pasauto, alors ce que vous dites vraiment n'a pas de sens et right est ignoré (toutes les instructions s'appliquent également à haut/bas/hauteur):

Si rien de gauche/droite/largeur n'est automatique ... les valeurs sont trop contraintes, ignorez la valeur pour gauche (dans le cas où la propriété direction du bloc contenant est rtl) ou droite (dans le cas où direction est ltr) et résolvez pour cette valeur.

Mais si votre élément n'a pas de largeur définie, ou que la largeur est (la valeur par défaut) auto, cette règle entre en jeu:

Si la largeur est automatique, gauche et droite ne sont pas automatiques, alors résolvez la largeur.

Enfin, l'équation donnée qui détermine les valeurs de ces éléments est:

'gauche' + 'marge-gauche' + 'bordure-gauche-largeur' + 'rembourrage-gauche' + 'largeur' + 'rembourrage-droite' + 'bordure-droite-largeur' + 'marge-droite' + 'droite '= largeur du bloc conteneur

Nous pouvons clairement voir qu'après avoir branché nos valeurs pour left et right et les autres, width est la variable non résolue (et non contrainte), qui se révélera être width of containing box - left - right (plus ou moins) ou pour le dire autrement: "remplissez l'espace entre les décalages".

25
Scott Weaver

Vous pouvez faire 100% de largeur et 100% de hauteur en utilisant top: 0; gauche: 0; en bas: 0; à droite: 0;

Exemple: vous avez un div, il n'y a pas de largeur et de hauteur fixes pour ce div. dans ce cas, vous pouvez appliquer ce style et faire 100% de largeur et hauteur.

div{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

JSFIDDLE DEMO

17
shanidkv
{

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}

Essentiellement, ce que fait cette propriété, c'est qu'elle étend votre div ou tout autre élément contenant la propriété ci-dessus à un plein écran. Bien que si votre page Web est supérieure à un plein écran, vous pouvez faire défiler vers le bas pour voir le reste de votre page, c'est-à-dire que l'élément stylisé dépend toujours de votre page inférieure.

 {

            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

}

La position fixe d'autre part fait la même chose mais avec un avantage supplémentaire de ne pas faire défiler. Cela signifie que vous pouvez avoir un plein écran complet sur votre page qui peut être déclenché au fur et à mesure des besoins et que votre div supérieur contenant la propriété ci-dessus sera indépendant de la page inférieure.

2
Anurag Kumar