Kursus IT Dasar CSS 028_Float, Positioning, Alignment

Float

Dalam CSS, float adalah teknik tata letak yang melalui properti float membuat elemen mengambang di sepanjang sisi kiri atau kanan kontainernya, sehingga elemen lain dapat mengelilinginya.

Contoh:

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>

Efek: Efek contoh Elemen float dapat menyebabkan kolapsnya tinggi elemen induk, mempengaruhi elemen DIV lainnya, dan beberapa elemen float pada baris yang sama mungkin saling tumpang tindih. Properti clear digunakan untuk mengontrol pengaruh di antara mereka.

Contoh:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Gunakan properti `clear` untuk membatalkan pengaruh elemen float
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
        Ini adalah teks yang akan terpengaruh.
6
    </div>

Efek: Efek contoh Contoh:

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 Januari 2024</div><div class="float-right">Judul Artikel Judul Artikel Judul Artikel</div>

Efek:

Efek contoh

Float adalah teknik awal untuk membuat tata letak multi-kolom, tetapi dalam tata letak modern, teknik tata letak yang lebih fleksibel seperti Flexbox atau Grid lebih direkomendasikan.

Positioning

Dalam CSS, positioning mengacu pada pengaturan mode penempatan elemen melalui properti position, serta menentukan posisi elemen relatif terhadap elemen leluhur yang diposisikan terdekat melalui properti top, right, bottom, left.

Positioning dilakukan relatif terhadap leluhur yang diposisikan terdekat (position bukan static). Jika tidak ada leluhur yang diposisikan, positioning dilakukan relatif terhadap blok penampung awal (biasanya elemen <html>).
Elemen dengan positioning absolut dan fixed akan keluar dari aliran dokumen normal dan dapat mempengaruhi tata letak elemen lain.
Nilai properti biasanya menggunakan piksel (px) atau persentase (%).

Positioning Statis static

Positioning statis (Static Positioning) adalah nilai default properti position dan biasanya tidak perlu ditentukan secara eksplisit. Elemen dengan positioning statis disusun secara normal dalam aliran dokumen dan tidak terpengaruh oleh properti top, right, bottom, left.

Positioning Awal initial

Dalam CSS, initial adalah kata kunci untuk mengatur ulang nilai properti ke nilai awalnya. Untuk properti position, nilai awalnya adalah static. Menggunakan position: initial; sama dengan tidak mengatur properti position.

Positioning Relatif relative

Elemen diposisikan relatif terhadap posisi normalnya.

Contoh:

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> Coba tambahkan br atau elemen lainnya -->
2
  <div class="base relative-example"></div>

Efek: Efek contoh

Positioning Absolut absolute

Elemen diposisikan relatif terhadap elemen leluhur yang diposisikan terdekat.

Contoh:

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>

Efek:

Efek contoh

Positioning Tetap fixed

Elemen diposisikan relatif terhadap jendela browser dan selalu tetap di posisi tetap pada layar.

Contoh:

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>

Efek:

Efek contoh

Positioning Lengket sticky

Elemen menjadi positioning tetap saat digulir ke posisi tertentu, jika tidak maka menjadi positioning relatif.

Contoh:

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>

Efek:

Efek contoh

Positioning Warisan inherit

Elemen mewarisi mode positioning dari elemen induknya.

Contoh:

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

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

Efek: Efek contoh

Urutan Tumpukan (elemen yang tumpang tindih)

z-index adalah properti CSS untuk mengontrol urutan tumpukan. Ini menentukan urutan tampilan elemen dalam tumpukan vertikal, yaitu elemen mana yang akan berada di depan atau di belakang elemen lainnya.

Nilai z-index bisa negatif.
Elemen dengan z-index lebih besar akan menutupi elemen dengan nilai lebih kecil.
z-index hanya efektif pada elemen yang diposisikan (position bukan static).
z-index memerlukan opacity elemen bukan 0.

Contoh:

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>

Alignment

Alignment CSS mengacu pada pengontrolan perataan horizontal dan vertikal elemen melalui properti CSS. Properti alignment CSS dapat diterapkan pada elemen apa pun, termasuk teks, gambar, tabel, daftar, dll.

Properti alignment umum memiliki nilai berikut:

left: Rata kiri
center: Rata tengah
right: Rata kanan
top: Rata atas
middle: Rata tengah
bottom: Rata bawah

Perataan Horizontal `text-align`

Digunakan untuk mengatur perataan horizontal konten teks dalam kotak elemen.

Contoh:

1
.text-center {
2
  text-align: center; /* Rata tengah horizontal */
3
}
4
.text-left {
5
  text-align: left; /* Rata kiri */
6
}
7
.text-right {
8
  text-align: right; /* Rata kanan */
9
}
10
.text-justify {
11
  text-align: justify; /* Rata kiri-kanan */
12
}

1
  <div class="text-center">Ini adalah sebuah teks ABCDE 12345</div>
2
    <div class="text-left">Ini adalah sebuah teks ABCDE 12345</div>
3
    <div class="text-right">Ini adalah sebuah teks 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>

Efek: Efek contoh

Perataan Vertikal `vertical-align`

Digunakan untuk mengatur perataan vertikal elemen inline di dalam sebuah elemen. Biasanya digunakan untuk elemen inline dan tidak berpengaruh langsung pada elemen blok.

Contoh:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Perataan garis dasar default */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Rata atas */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Rata tengah */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Rata bawah */
15
}

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

Efek: Efek contoh

Float

Positioning

Positioning Statis static

Positioning Awal initial

Positioning Relatif relative

Positioning Absolut absolute

Positioning Tetap fixed

Positioning Lengket sticky

Positioning Warisan inherit

Urutan Tumpukan (elemen yang tumpang tindih)

Alignment

Perataan Horizontal text-align

Perataan Vertikal vertical-align

Komentar

Perataan Horizontal `text-align`

Perataan Vertikal `vertical-align`