Vertieftes Verständnis der Position in HTML5

Position von CSS ist sehr wichtig. Es gibt insgesamt 4 Attributwerte:

statisch, relativ, absolut, fest. Die Position des

-Elements wird durch die Attribute „links“, „oben“, „rechts“ und „unten“ angegeben, und die Anzeigeebene wird durch den Z-Index gesteuert.

statisch: statische Positionierung. Wenn Sie das Positionsattribut nicht festlegen, ist der Standardwert statisch. Attribute wie „oben“, „links“, „unten“ und „rechts“ sind im statischen Zustand ungültig. Um diese Attribute zu verwenden, muss die Position auf einen der anderen drei Werte festgelegt werden.

relative: Das relative -Element folgt dem normalen Dokumentfluss, sodass umgebende Elemente seine Existenz nicht ignorieren. Das relative-Element unterstützt auch Attribute wie top,bottom,left,right. Wenn wir Attribute wie top,bottom,left,right verwenden, um das relative-Element relativ zu positionieren, ähnelt der Effekt in gewisser Weise dem Effekt, der durch das margin-Attribut erzielt wird, aber der Unterschied besteht darin, dass die Elemente um das relative-Element herum das ignorieren Bewegung des relative-Elements

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}

absolut: Das absolute-Element wird aus dem Normalen ausbrechen Dokumentfluss, sodass die ihn umgebenden Elemente seine Existenz ignorieren. Genauso wie das absolute-Attribut des display-Elements auf none gesetzt ist. Zu diesem Zeitpunkt können wir Attribute wie top,bottom,left,right verwenden, um das absolute -Element absolut zu positionieren. Im Allgemeinen werden zwei Attribute definiert: top 或 bottom,left 或 right.

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}

fixed: Feste Positionierung. Das Element wird auf eine feste Position im Browser gesetzt und scrollt nicht mit anderen Elementen. Im übertragenen Sinne ändert sich die Position des festen Elements auf dem Bildschirm nicht, wenn die Bildlaufleiste nach oben oder unten gezogen wird. Es ist zu beachten, dass IE6 dieses Attribut nicht unterstützt.

Erstens hat die Positionierung des fixed-Elements nichts mit seinem übergeordneten Element zu tun. Es wird immer relativ zum äußersten window positioniert.
Zweitens ist das fixed-Element genau wie sein Name an einer bestimmten Position auf dem Bildschirm fixiert und verschwindet nicht durch Scrollen des Bildschirms.

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}

Das Positionsattribut ist im CSS-Layout von entscheidender Bedeutung eine große Hilfe sein, um in Zukunft p plus CSS zu lernen

Das obige ist der detaillierte Inhalt vonVertieftes Verständnis der Position in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!