Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Saturday, 18 March 2017

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.

Nb : Untuk membuat gambar dibelakang element menggunakan syntaks "z-index".


Di atas adalah hasil overlapping elemen atau gambar berada di belakang element.

Nah mungkin itu saja dari saya, semoga bermanfaat.
Jangan lupa ikuti dan share.

Syukron

Wassalamualaikum Wr. Wb.


No comments:

Post a Comment

Adbox