position: fixed

[Franz]

Das heißt, in beiden Fällen wird das Element aus dem normalen Elementfluss genommen und über die Eigenschaften top, bottom, left und right orientiert.

Der Unterschied besteht grob gesagt darin, dass bei absolut positionierten Elementen die Orientierung in Bezug auf das nächste mit position positionierte Vorfahrenelement erfolgt, bei fixed hingegen in Bezug auf den Viewport (der übrigens nicht mit dem html-Element gleichzusetzen ist).

Wenn du also ein mit fixed positioniertes Element wie deinen header zentrieren möchtest, dann kannst du das auf zwei Arten machen, nämlich entweder, indem du wie in diesem Beispiel der Eigenschaft left (oder right) einen relativen Wert zuweist.

Oder indem du left und right auf 0 setzt, und dann wie gewohnt margin: 0 auto; angibst, wie hier beispielhaft dargestellt.

Im ersten Beispiel wird der header eigentlich nicht zentriert sondern mit left und width bleibt für right wieder 20 %; also keine echte Zentrierung.

Wie wird im ersten Beispiel eigentlich main zentriert?
Wozu dient (in diesem Fall) * {? Ebenso warum die body-Formatierung?

In meinem Beispiel bemerke ich, daß bei display: fixed; auch der Inhalt fixiert wird. Das ist aber in meinem Fall nicht gewünscht, da ja der Inhalt veränderlich ist.

In meinem Beispiel habe ich die Zentrierung so geschafft:

header{  
	position: fixed;  
	top: .5em;  
	width: 90em;  
	left: 0;  
	right: 0;  
	margin: auto;  
	border: 2px solid #3481cd;  
	background-color: red;  
	}

Margin: genügt so wie angeführt und benötigt nicht margin: 0 auto;. Zumindest merke ich im browser keinen Unterschied.

LG Franz