CSS En-tête fixe - A-t-il besoin de deux positions?

Question

J'ai vu quelques exemples de ce flottant autour, mais je me demande si c'est nécessaire pour déclarer deux positions lors de la fixation d'un en-tête?

Par exemple, avez-vous besoin de déclarer top:0;etleft:0;:

.header { 
position: fixed; 
top: 0; 
left:0; 
width:100%; 
} 

Ou pouvez-vous sortir avec juste top:0;:

.header { 
position: fixed; 
top: 0; 
width:100%; 
} 

Je viens un peu perplexe car je ai vu des exemples avec les deux, mais je ne peux pas trouver une explication raisonnable si la configuration top:0; left:0' est nécessaire/mieux que juste top:0; pour un en-tête fixe?

Answer 1

Puisque votre width est 100% cela n'a aucune importance. Cependant, si la largeur n'était pas 100% et si <nav> était un enfant d'un élément qui n'est pas positionné en haut à gauche, votre nav serait positionné horizontalement en fonction de l'élément parent. (Pas tout le chemin à gauche)

Answer 2

Si le top ou left n'est pas déclaré, la valeur par défaut est left:auto ou top:auto. un moyen automatique pour left (pour les éléments fixes positionnés):

• si droite et la largeur est définie, la gauche est calculée

• si la largeur ou est indéfini droite à gauche est calculée de débit par défaut du contenu en position non-défilée comme pour les éléments de bloc.

Ensuite, si vous utilisez position:fixed il sera souvent nécessaire d'utiliser gauche/droite et haut/bas styles.

Pour afficher les différences, utilisez margin-right:-100px et placez votre en-tête dans un autre élément, par exemple la deuxième cellule de la table.

Testez ici - vous pouvez ajouter left:0 et refaire le test. https://jsfiddle.net/vau6g09f/