CSS Layout - The position Property

Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).

The position Property

Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen. Ada empat nilai posisi yang berbeda:

• static
• relative
• fixed
• absolute

Elemen kemudian diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur pertama. Mereka juga bekerja berbeda tergantung pada nilai posisi.

position: static;

Elemen HTML diposisikan statis secara default. Elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat yang tepat.

Sebuah elemen dengan posisi: statis; tidak diposisikan dalam cara yang khusus; itu selalu diposisikan sesuai dengan aliran normal halaman:

div.static {
    position: static;
    border: 3px solid #8AC007;
}

position: relative;

Sebuah elemen dengan posisi: relatif; diposisikan relatif terhadap posisi normal.

Mengatur atas, kanan, bawah, dan sifat kiri elemen yang relatif strategis akan menyebabkan disesuaikan jauh dari posisi normal. Konten lainnya tidak akan disesuaikan untuk masuk ke setiap celah yang ditinggalkan oleh elemen.

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #8AC007;
}

position: fixed;

Sebuah elemen dengan posisi: fixed; diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman tersebut menggulir. Atas, kanan, bawah, dan sifat kiri digunakan untuk posisi elemen.

Unsur tetap tidak meninggalkan celah di halaman mana biasanya telah berada. Perhatikan elemen tetap di sudut kanan bawah halaman. Berikut adalah CSS yang digunakan:

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

position: absolute;

Sebuah elemen dengan position: absolute; diposisikan relatif terhadap leluhur diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap).

Namun; jika elemen diposisikan mutlak tidak memiliki nenek moyang posisi, ia menggunakan tubuh dokumen, dan bergerak bersama dengan halaman bergulir.

Catatan: Sebuah "diposisikan" elemen adalah salah satu yang posisinya apa-apa kecuali statis. Berikut ini adalah contoh sederhana:

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

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

Overlapping Elements

Ketika elemen diposisikan, mereka dapat tumpang tindih elemen lainnya. Properti z-index menentukan urutan tumpukan elemen (elemen yang harus ditempatkan di depan, atau di belakang, yang lain).

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