IT-Kurs CSS-Grundlagen 028_Float, Positionierung, Ausrichtung

Float

In CSS ist Float eine Layouttechnik, die über die float-Eigenschaft ein Element entlang der linken oder rechten Seite seines Containers schweben lässt, sodass andere Elemente es umfließen können.

Beispiel:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>

Effekt: Beispieleffekt Float-Elemente können dazu führen, dass die Höhe des übergeordneten Elements zusammenfällt, andere DIV-Elemente beeinflusst werden und mehrere Float-Elemente in derselben Zeile sich überlappen können. Die clear-Eigenschaft wird verwendet, um den Einfluss zwischen ihnen zu steuern.

Beispiel:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Verwenden Sie die `clear`-Eigenschaft, um den Einfluss von Float-Elementen aufzuheben
8
     .content {
9
        clear: both;
10
    } */

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>
3

4
    <div class="content">
5
        Dies ist ein Text, der beeinflusst wird.
6
    </div>

Effekt: Beispieleffekt Beispiel:

1
    .float-left {
2
        float: left;
3
    }
4
    .float-right {
5
        float: right;
6
    }

1
    <img class="float-left" src="zhaojian1.jpg" alt="" srcset="">
2
    <div class="float-right">25. Januar 2024</div><div class="float-right">Artikeltitel Artikeltitel Artikeltitel</div>

Effekt:

Beispieleffekt

Float war eine frühe Technik zur Erstellung mehrspalter Layouts, aber in modernen Layouts werden flexiblere Layouttechniken wie Flexbox oder Grid empfohlen.

Positionierung

In CSS bezieht sich Positionierung auf das Festlegen der Positionierungsart eines Elements über die position-Eigenschaft sowie auf die Angabe der Position des Elements relativ zu seinem nächsten positionierten Vorfahrenelement über die Eigenschaften top, right, bottom, left.

Die Positionierung erfolgt relativ zum nächsten positionierten (position ist nicht static) Vorfahrenelement. Wenn kein positioniertes Vorfahrenelement vorhanden ist, erfolgt die Positionierung relativ zum initialen umgebenden Block (normalerweise das <html>-Element).
Absolut und fest positionierte Elemente werden aus dem normalen Dokumentenfluss herausgenommen und können das Layout anderer Elemente beeinflussen.
Die Eigenschaftswerte verwenden normalerweise Pixel (px) oder Prozent (%).

Statische Positionierung static

Statische Positionierung (Static Positioning) ist der Standardwert der position-Eigenschaft und muss normalerweise nicht explizit angegeben werden. Statisch positionierte Elemente werden im normalen Dokumentenfluss angeordnet und sind nicht von den Eigenschaften top, right, bottom, left betroffen.

Anfangspositionierung initial

In CSS ist initial ein Schlüsselwort, das den Eigenschaftswert auf seinen Anfangswert zurücksetzt. Für die position-Eigenschaft ist der Anfangswert static. Die Verwendung von position: initial; entspricht dem Nicht-Setzen der position-Eigenschaft.

Relative Positionierung relative

Das Element wird relativ zu seiner normalen Position positioniert.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        background-color: aquamarine;
5
    }
6
    .relative-example {
7
        position: relative;
8
        top: 100px;
9
        left: 20%;
10
    }

1
  <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> Versuchen Sie, br oder andere Elemente hinzuzufügen -->
2
  <div class="base relative-example"></div>

Effekt: Beispieleffekt

Absolute Positionierung absolute

Das Element wird relativ zu seinem nächsten positionierten Vorfahrenelement positioniert.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .absolute-example {
6
        position: absolute;
7
        top: 50px;
8
        left: 100px;
9
        background-color: blueviolet;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base absolute-example"></div>

Effekt:

Beispieleffekt

Feste Positionierung fixed

Das Element wird relativ zum Browserfenster positioniert und bleibt immer an einer festen Position auf dem Bildschirm.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .fixed-example {
6
        position: fixed;
7
        bottom: 40%;
8
        left: 40%;
9
        background-color: gold;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
3
    <div class="base fixed-example"></div>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Effekt:

Beispieleffekt

Sticky-Positionierung sticky

Das Element wird zu einer festen Positionierung, wenn es zu einer bestimmten Position gescrollt wird, ansonsten ist es relativ positioniert.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .sticky-example {
6
        position: sticky;
7
        top: 10%;
8
        left: 40%;
9
        background-color: darkcyan;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base sticky-example"></div>
3
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
6
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Effekt:

Beispieleffekt

Vererbte Positionierung inherit

Das Element erbt die Positionierungsart seines übergeordneten Elements.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* Achten Sie auf die Grenze */
8
        left: 100%; /* Achten Sie auf die Grenze */
9
        background-color: violet;
10
    }

1
    <div class="base relative-example">
2
        <div class="base inherit-example"></div>
3
    </div>

Effekt: Beispieleffekt

Stapelreihenfolge (überlappende Elemente)

z-index ist eine CSS-Eigenschaft zur Steuerung der Stapelreihenfolge. Sie bestimmt die Anzeigereihenfolge eines Elements in der vertikalen Stapelung, d.h. welches Element vor oder hinter welchem Element liegt.

Der z-index-Wert kann negativ sein.
Elemente mit größerem z-index überdecken Elemente mit kleinerem Wert.
z-index ist nur bei positionierten Elementen (position ist nicht static) wirksam.
z-index erfordert, dass die opacity des Elements nicht 0 ist.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        position: absolute;
5
    }
6
    .z-index-example1{
7
        background-color: red;
8
        z-index: 9;
9
    }
10
    .z-index-example2{
11
        background-color: blue;
12
        z-index: 1;
13
    }

1
    <div class="base z-index-example1"></div>
2
    <div class="base z-index-example2"></div>

Ausrichtung

CSS-Ausrichtung bezieht sich auf die Steuerung der horizontalen und vertikalen Ausrichtung von Elementen über CSS-Eigenschaften. CSS-Ausrichtungseigenschaften können auf jedes Element angewendet werden, einschließlich Text, Bilder, Tabellen, Listen usw.

Häufige Ausrichtungseigenschaften haben folgende Werte:

left: Linksbündig
center: Zentriert
right: Rechtsbündig
top: Oben ausgerichtet
middle: Mittig ausgerichtet
bottom: Unten ausgerichtet

Horizontale Ausrichtung `text-align`

Wird verwendet, um die horizontale Ausrichtung des Textinhalts im Elementrahmen festzulegen.

Beispiel:

1
.text-center {
2
  text-align: center; /* Horizontal zentriert */
3
}
4
.text-left {
5
  text-align: left; /* Linksbündig */
6
}
7
.text-right {
8
  text-align: right; /* Rechtsbündig */
9
}
10
.text-justify {
11
  text-align: justify; /* Blocksatz */
12
}

1
  <div class="text-center">Dies ist ein Text ABCDE 12345</div>
2
    <div class="text-left">Dies ist ein Text ABCDE 12345</div>
3
    <div class="text-right">Dies ist ein Text ABCDE 12345</div>
4
    <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>

Effekt: Beispieleffekt

Vertikale Ausrichtung `vertical-align`

Wird verwendet, um die vertikale Ausrichtung von Inline-Elementen innerhalb eines Elements festzulegen. Wird normalerweise für Inline-Elemente verwendet und hat keinen direkten Einfluss auf Blockelemente.

Beispiel:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Standard-Grundlinienausrichtung */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Oben ausgerichtet */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Mittig ausgerichtet */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Unten ausgerichtet */
15
}

1
    <div class="base">
2
        <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">Dies ist ein Text ABCDE 12345
3
    </div>
4
    <div class="base">
5
        <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">Dies ist ein Text ABCDE 12345
6
    </div>
7
    <div class="base">
8
        <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">Dies ist ein Text ABCDE 12345
9
    </div>
10
    <div class="base">
11
        <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">Dies ist ein Text ABCDE 12345
12
    </div>

Effekt: Beispieleffekt

Float

Positionierung

Statische Positionierung static

Anfangspositionierung initial

Relative Positionierung relative

Absolute Positionierung absolute

Feste Positionierung fixed

Sticky-Positionierung sticky

Vererbte Positionierung inherit

Stapelreihenfolge (überlappende Elemente)

Ausrichtung

Horizontale Ausrichtung text-align

Vertikale Ausrichtung vertical-align

Kommentare

Horizontale Ausrichtung `text-align`

Vertikale Ausrichtung `vertical-align`