So verwenden Sie die CSS-Position

Wir verwenden Position oft für eine hierarchische absolute Positionierung. Wie können wir also das Positionsattribut mit CSS geschickt beherrschen? Heute sind wir hier, um es mit Ihnen zu studieren.

Positionssyntax und -struktur

Positionssyntax:

Position: statisch absolut relativ

Positionsparameter:

statisch: Es gibt keine spezielle Positionierung. Das Objekt folgt den HTML-Positionierungsregeln

absolut: Ziehen Sie das Objekt aus dem Dokumentfluss und verwenden Sie links, rechts, oben, unten und andere Attribute für die absolute Positionierung. Und seine Kaskadierung wird durch das CSS-Attribut z-index definiert. Zu diesem Zeitpunkt hat das Objekt keine Ränder, aber es gibt immer noch Abstände und Ränder

relativ: Das Objekt kann nicht gestapelt werden, sondern wird im normalen Dokumentenfluss basierend auf links, rechts, oben und unten versetzt und andere Attribute

Positionsbeschreibung:

Legen Sie die Positionierungsmethode des Objekts fest, wodurch die Layoutebene einfacher absolut positioniert und das Boxobjekt genauer gesteuert werden kann.

Die tatsächliche Verwendung der Position

Absolute Positionierungsposition wird zum Positionieren von Boxobjekten verwendet. Manchmal gibt es mehrere kleine Objekte in einem Layout, und es ist nicht einfach, CSS Padding und CSS-Marge für die relative Positionierung. Zu diesem Zeitpunkt können wir die absolute Positionierung verwenden, um dies einfach zu tun. Insbesondere für die unregelmäßige Anordnung mehrerer kleiner Kisten in einer Kiste ist es für uns zu diesem Zeitpunkt sehr praktisch, die absolute Positionspositionierung zum Anordnen von Objekten zu verwenden.

Die Positionsdemonstration mit absoluter Positionierung eignet sich für Bilder und unregelmäßige Layouts. Sie können position:absolute;position:relative für die absolute Positionierung verwenden.

Absolute Positionierung und Float können nicht gleichzeitig verwendet werden, z als große Box Einige davon sind absolute Positionierungen, andere verwenden CSS-Float-Floating-Positionierung. Auf diese Weise zeigt der IE6-Browser diese absolute Positionierung und relative Positionierung im geänderten Objekt nicht an. Dies kann auch als IE6-CSS-HACK angesehen werden. Achten Sie nur darauf, sie nicht zu vermischen.

Absolute Positionierungsbedingungen

position:absolute; position:relativeDie Verwendung der absoluten Positionierung erfolgt normalerweise durch das übergeordnete Element, das die Position:relative Positionierung definiert, und das untergeordnete Element, das das absolute Positionierungsattribut position:absolute definiert Das Kind verwendet links oder rechts und oben oder unten, um eine absolute Positionierung durchzuführen.

.div{position:relative} Definition, normalerweise ist es am besten, die CSS-Breite und CSS-Höhe durch

.div-a{position:absolute;left:10px;top:10px} zu definieren hier Der Abstand von der linken Seite des übergeordneten Elements beträgt 10 Pixel und der Abstand von der Oberseite des übergeordneten Elements beträgt 10 Pixel

oder

.div-a{position:absolute;right:10px; unten:10px} hier definiert Der Abstand rechts vom übergeordneten Element beträgt 10 Pixel und der Abstand zum unteren Rand des übergeordneten Elements beträgt 10 Pixel

entsprechend der HTML-Struktur

<div class="div">
    <div class="div-a"></div>
</div>

Auf diese Weise , „div-a“ ist absolut innerhalb des übergeordneten „div“ „Innerhalb der Box“ positioniert.

Beachten Sie, dass links (links) und rechts (rechts) nur eine Definition für ein Objekt auswählen können und dass unten (unten) und oben (oben) ebenfalls nur eine Definition für ein Objekt auswählen können.

Positionsanwendungsfall

Hier ist ein Beispiel für die Anwendung der absoluten Positionspositionierung. Wir setzen den CSS-Rand einer äußersten Box auf Rot, die CSS-Breite auf 400 Pixel, die CSS-Höhe auf 200 Pixel und den Innenraum enthält 2 Um die absolute Positionierung für diese beiden Felder zu verwenden, lautet der CSS-Name des ersten Felds „div-a“, seine Breite beträgt 100 Pixel, die Hintergrundfarbe ist Schwarz, die Höhe beträgt 100 Pixel und der Positionierungsabstand beträgt 10 Pixel übergeordnetes Element, und der Abstand von links beträgt 10 Pixel; die zweite Box-CSS-Klasse heißt „div-b“, ihre Breite und Höhe betragen jeweils 50 Pixel, die Farbe des

CSS-Hintergrunds ist blau, der Abstand vom unteren Rand Das übergeordnete Element ist 13 Pixel groß und der Abstand rechts vom übergeordneten Element beträgt 15 Pixel.

1. Der CSS-Code lautet wie folgt

<style> 
.div{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divc-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 
.div-b{ position:absolute;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 
</style>

HTML-Code-Snippet

<div class="div"> 
    <div class="div-a"></div> 
    <div class="div-b"></div> 
</div>

Es gibt so viele Möglichkeiten, das Positionsattribut von CSS Friends zu verwenden Wenn Sie es benötigen, können Sie es auch weiterhin speichern.

Verwandte Lektüre:

Ein paar Beispiele für kleine Funktionen, die mit reinem CSS erstellt wurden

Häufig verwendete Link-Tag-Anmerkungen in HTML

Warum DIV-CSS manchmal nicht geladen werden kann

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!