Positionsverwendung in HTML

Früher habe ich in C++ unter Unix gearbeitet. Vor kurzem habe ich begonnen, auf Webentwicklung umzusteigen. Plötzlich stellte ich fest, dass Webentwicklung viele und komplizierte Technologien wie js, css, html usw. erfordert. Ich bin verwirrt. Ich lerne kürzlich HTML und bin verwirrt über die Position. Ich habe einen Artikel über Position im Internet gefunden. Er ist sehr gut und leicht zu verstehen. Jetzt möchte ich ihn mit Ihnen teilen. Dies sind die vier Attributwerte der nachgedruckten Verbindung

Position:

1.relative

2.absolute

3.fixed

4.statisch

Im Folgenden werden diese vier Attribute jeweils beschrieben.

sub1

sub2

1. relative

Das relative Attribut ist relativ einfach. Wir müssen herausfinden, um welches Objekt es sich handelt relativ zu. Die Antwort liegt in seinem Standort. Im obigen Code stehen sub1 und sub2 in einer Geschwisterbeziehung. Wenn Sie beispielsweise ein relatives Attribut von sub1 festlegen, legen Sie den folgenden CSS-Code fest:

#sub1

{

Position: relativ;

Innenabstand: 5px;

oben: 5px;

links: 5px;

}

Wir können es so verstehen: Wenn das relative Attribut nicht festgelegt ist, sollte sich die Position von sub1 gemäß dem normalen Dokumentenfluss an einer bestimmten Position befinden. Wenn die Position von sub1 jedoch auf „relativ“ gesetzt ist, wird sie entsprechend ihrer angenommenen Position entsprechend den Werten von „oben“, „rechts“, „unten“ und „links“ verschoben. Darin spiegelt sich auch die „relative“ Bedeutung von „relativ“ wider .

Hierfür müssen Sie sich nur merken, wo sub1 sein sollte, wenn Sie nicht „relativ“ festlegen, und sobald es festgelegt ist, entsprechend versetzen, wo es sein sollte.

Die nächste Frage ist: Wo ist die Position von Sub2? Die Antwort ist, wo es vorher war und wo es jetzt ist. Seine Position wird sich nicht ändern, da sub1 das Positionsattribut hinzufügt.

Was passiert, wenn die Position von sub2 zu diesem Zeitpunkt auch auf relativ gesetzt ist? Zu diesem Zeitpunkt ist es immer noch dasselbe wie sub1, versetzt entsprechend seiner ursprünglichen Position.

Beachten Sie, dass der relative Versatz auf der oberen linken Seite des Objektrands basiert.

2. absolut

Dieses Attribut ist immer irreführend. Es heißt, wenn das Positionsattribut auf „absolut“ gesetzt ist, wird es immer entsprechend dem Browserfenster positioniert. Dies ist tatsächlich falsch. Tatsächlich ist dies ein Merkmal fester Eigenschaften.

Wenn die Position von sub1 auf absolut eingestellt ist, wer wird dann als zu versetzendes Objekt verwendet? Hier gibt es zwei Situationen:

(1) Wenn das übergeordnete Objekt von sub1 (oder Urgroßvater, solange es ein übergeordnetes Objekt ist) das übergeordnete Objekt auch das Positionsattribut festlegt und der Attributwert der Position ist absolut oder relativ, das heißt, wenn es nicht der Standardwert ist, wird sub1 entsprechend diesem übergeordneten Element positioniert.

Beachten Sie, dass es, obwohl das Objekt bestimmt wurde, einige Details gibt, die Ihre Aufmerksamkeit erfordern. Welchen Positionierungspunkt des übergeordneten Objekts sollten wir zur Positionierung verwenden? Wenn das übergeordnete Element Attribute wie Rand, Rahmen, Innenabstand usw. festlegt, ignoriert dieser Positionierungspunkt den Innenabstand und wird am Anfang des Innenabstands positioniert (d. h. nur ab der oberen linken Ecke des Innenabstands). Das heißt, wenn Sie die Polsterung ignorieren, werden Rand und Rand natürlich nicht ignoriert.

Die nächste Frage ist: Wo ist die Position von Sub2? Denn wenn die Position auf „absolut“ gesetzt ist, führt dies dazu, dass sub1 den normalen Dokumentfluss überläuft, als ob es nicht zum übergeordneten Element gehört, es wird in DreamWeaver als „Ebene“ bezeichnet, bedeutet aber tatsächlich dasselbe . Zu diesem Zeitpunkt erhält sub2 die Position von sub1 und sein Dokumentenfluss basiert nicht mehr auf sub1, sondern beginnt direkt beim übergeordneten Element.

(2) Wenn sub1 kein übergeordnetes Objekt mit einem Positionsattribut hat, wird der Körper als Positionierungsobjekt verwendet und entsprechend dem Browserfenster positioniert. Dies ist einfacher zu verstehen.

3. Fixed

Fixed ist ein spezielles Absolutwert, das heißt, Fixed nimmt immer den Körper als Positionierungsobjekt und positioniert ihn entsprechend dem Browserfenster. Auch wenn die Bildlaufleiste gezogen wird. seine Position ist: Es wird sich nicht ändern. Ähnlich wie „background-attachment:fixed“

Natürlich scheint es unter Dreamweaver nicht unterstützt zu werden

statisch

Der Standardwert von position Wenn das Positionsattribut nicht festgelegt ist, erfolgt die normale Anordnung des Dokumentenflusses.

Das obige ist der detaillierte Inhalt vonPositionsverwendung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!