Tata Letak CSS - Posisi Properti ~ KODELOVER

Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).Posisi PropertiProperti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen.Ada empat nilai posisi yang berbeda:

    static/statis
relative/ relatif
    fixed/tetap
    absolute/mutlak

Elemen kemudian diposisikan menggunakan properti atas, bawah, kiri, dan kanan. Namun, properti ini tidak akan bekerja kecuali properti posisi ditetapkan terlebih dahulu. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.

position: static;

Elemen HTML diposisikan statis secara default.Elemen yang diposisikan secara statis tidak terpengaruh oleh properti atas, bawah, kiri, dan kanan.Elemen dengan posisi: statis; Tidak diposisikan dengan cara yang khusus; Itu selalu diposisikan sesuai dengan arus normal halaman:

Elemen <div> ini memiliki posisi: statis;

Berikut adalah CSS yang digunakan:
Contoh:

div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;

Elemen dengan posisi: relatif; Diposisikan relatif terhadap posisi normalnya.Menetapkan properti atas, kanan, bawah, dan kiri dari elemen yang diposisikan relatif tinggi akan menyebabkannya disesuaikan dari posisi normalnya. Konten lainnya tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.

Elemen <div> ini memiliki position: relative;

Berikut adalah CSS yang digunakan:
Contoh:

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position: fixed;

Unsur dengan posisi: tetap; Diposisikan relatif terhadap area pandang, yang berarti selalu berada di tempat yang sama meskipun halaman digulir. Properti atas, kanan, bawah, dan kiri digunakan untuk memposisikan elemen.Elemen tetap tidak meninggalkan celah di halaman tempat biasanya berada.Perhatikan elemen tetap di pojok kanan bawah halaman. Berikut adalah CSS yang digunakan:
Contoh:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: absolute;

Unsur dengan posisi: absolut; Diposisikan relatif terhadap nenek moyang terdekat (bukan posisi relatif terhadap area pandang, seperti yang ditetapkan).Namun; Jika elemen yang diposisikan mutlak tidak memiliki nenek moyang yang diposisikan, ia menggunakan badan dokumen, dan bergerak bersamaan dengan pengguliran halaman.Catatan: Elemen "diposisikan" adalah satu yang posisinya adalah sesuatu kecuali statis.Berikut adalah contoh sederhana:

Elemen <div> ini memiliki position: relative;

Elemen <div> ini memiliki position: absolute;

Berikut adalah CSS yang digunakan:
Contoh:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Elemen yang tumpang tindih
Bila elemen diposisikan, elemen tersebut bisa saling tumpang tindih.Properti z-index menentukan urutan tumpukan elemen (elemen mana yang harus ditempatkan di depan, atau di belakang, yang lain).Elemen dapat memiliki susunan tumpukan positif atau negatif:Ini adalah judulKarena gambar memiliki z-index -1, maka akan ditempatkan dibelakang teks.
Contoh:

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Elemen dengan susunan tumpukan yang lebih besar selalu berada di depan elemen dengan urutan tumpukan yang lebih rendah.Catatan Catatan: Jika dua elemen yang diposisikan tumpang tindih tanpa indeks z yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di bagian atas.

Semua Properti Posisi CSS

bottom > Menetapkan tepi tepi bawah untuk kotak yang diposisikan
clip     > Klip elemen yang benar-benar diposisikan
cursor     >Menentukan jenis kursor yang akan ditampilkan
left     >Menetapkan tepi margin kiri untuk kotak yang diposisikan
Overflow >Menentukan apa yang terjadi jika konten meluap pada kotak elemen
Overflow-x >Menentukan apa yang harus dilakukan dengan sisi kiri / kanan konten jika melimpah pada area konten elemen
Overflow-y >Menentukan apa yang harus dilakukan dengan tepi atas / bawah konten jika melimpah pada area konten elemen
position     >Menentukan jenis posisi untuk elemen
Right >Mengatur tepi margin kanan untuk kotak yang diposisikan
Top >Mengatur tepi margin atas untuk kotak yang diposisikan
z-index >Mengatur urutan tumpukan elemen

KODELOVER

Tata Letak CSS - Posisi Properti

position: static;

position: relative;

position: fixed;

position: absolute;

Related Post