Belajar CSS Part 10 CSS Position

Belajar CSS Part 10 Mengatur Posisi di Dalam CSS

Assalamualaikum Wr. Wb.

PENGERTIAN

Position merupakan sebuah properti yang terdapat di dalam CSS. Properti ini berfungsi untuk menentukan posisi yang digunakan untuk elemen. Terdapat empat posisi yang terdapat pada properti ini.

static
relative
fixed
absolute

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

LATAR BELAKANG

Dengan adanya properti position di dalam CSS ini, dapat memudahkan dalam menentukan posisi yang cocok buat elemen.

MAKSUD & TUJUAN

Dapat menentukan posisi dari elemen dengan properti ini.
Dapat mengatur bentuk elemen dengan properti ini.

ALAT & BAHAN

Laptop/PC
Text Editor
Browser

LANGKAH KERJA

Di atas sudah dijelaskan bahwa properti position ini terdapat empat macam. Empat macam tersebut yaitu :

Position: static;

Posisi ini mengatur Elemen HTML diposisikan secara default. Elemen diposisikan statis tidak terpengaruh dengan bagian atas, bawah, kiri, dan properti yang tepat. Sebuah elemen dengan position: static; diposisikan dengan cara yang khusus itu selalu diposisikan sesuai dengan aliran normal halaman. Berikut merupakan contoh dari penggunaan properti position:static;

Nb : Untuk syntaknya menggunakan perintah "position : static;"

Gambar di atas merupakan salah satu contoh dari position static.

position: relative;

Sebuah elemen dengan position:relatif; diposisikan relatif terhadap posisi normal. Mengatur atas, kanan, bawah, dan sifat kiri dari elemen yang relatif strategis akan menyebabkan ia disesuaikan jauh dari posisi normal. konten lainnya tidak akan disesuaikan untuk masuk ke setiap celah yang ditinggalkan oleh elemen. Berikut adalah penggunaan dari CSS position:relative;

Penggunaan properti ini bisa menggunakan syntaks "position:relative;"

Hasilnya seperti gambar di atas. Dari gambar tersebut dapat disimpulkan bahwa position relative ini dapat mengatur posisi kanan, kiri, atas, maupun bawah.

position: fixed;

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

Nb : Syntaks di atas memposisikan elemen berada di kanan atas.

Nah gambar di atas adalah hasilnya. Posisi fixed ini akan tetap walaupun halamannya di scroll.

Position: absolute;

Sebuah elemen dengan position:absolute; diposisikan relatif terhadap halaman awal terdekat diposisikan (bukan relatif diposisikan untuk viewport, seperti tetap).
Namun; jika elemen diposisikan mutlak tidak memiliki halaman awal strategis, menggunakan badan dokumen, dan bergerak bersama dengan halaman bergulir.

Catatan: "positioned" elemen adalah salah satu yang posisinya apa-apa kecuali static. Untuk contoh penggunaanya bisa dilihat pada gambar berikut.

Nb : Syntaks di atas merupakan gabungan dari properti position:relative; dangan position:absolute;

Gambarnya terlihat seperti pada gambar di atas.

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 belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif.
Untuk contoh penggunaannya sebagai berikut.