CSS Position
Tabel Konten
Perkenalan
Pernahkah kalian melihat elemen yang tampak saling bertumpukan, melayang, atau tampak keluar dari garis batas? Itu semua dibuat menggunakan CSS Position. Ada empat posisi elemen dalam CSS: Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat pula beberapa properti yang biasanya dituliskan bersama dengan deklarasi posisi seperti top
, right
, bottom
, left
dan z-index
.
top, right, bottom dan left adalah koordinat posisi. Saat kita menambahkan nilai koordinat pada posisi yang sesungguhnya, maka elemen akan bergeser sesuai dengan besar nilai koordinat.
top
, right
, bottom
dan left
berbeda dengan margin-top
, margin-right
, margin-bottom
dan margin-left
. Nilai margin difokuskan kepada jarak elemen terhadap elemen lainnya, sedangkan nilai koordinat lebih difokuskan kepada offset posisi elemen dari tempat asalnya.
z-index adalah urutan tumpukan. Saat kita mendeklarasikan position:absolute
, maka kemungkinan yang terjadi adalah elemen akan bertumpuk di sebelah atas elemen atau di bawah elemen. Jika yang terjadi adalah yang ke dua, maka untuk mengangkatnya, kita harus mendeklarasikan z-index
dengan nilai yang lebih besar dari 1
.
Static
Ini adalah posisi sebenarnya. Mendeklarasikan position:static
sama saja dengan tidak mendeklarasikan CSS Posisi.
Relative
Mendeklarasikan position:relative
pada elemen secara kasat mata tidak akan mengubah apapun, namun kita bisa menerapkan koordinat posisi dan urutan tumpukan pada tipe posisi ini.
Absolute
Mendeklarasikan position:absolute
pada elemen akan benar-benar memutuskan aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan elemen lainnya.
Fixed
Mendeklarasikan position:fixed
pada elemen akan benar-benar memutuskan aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan elemen lain. Kelebihan penerapan posisi ini adalah akan membuat elemen tampak melayang dan tidak terpengaruh gerakan scroll bar.
Respon Peramban
Harap perhatikan juga bahwa respon peramban terhadap penerapan koordinat posisi relative pada elemen akan berbeda dengan posisi absolute dan fixed. Mendeklarasikan koordinat pada posisi relative akan menggeser elemen berdasarkan posisi asalnya, berbeda dengan posisi absolute dan fixed yang akan dipindahkan posisinya berdasarkan koordinat layar peramban. Seperti ini:
Contoh Deklarasi Relative | Contoh Deklarasi Absolute | Contoh Deklarasi Fixed |
---|---|---|
#area-1 { | #area-1 { | #area-1 { |
18 Komentar
Unknown
wah aku suka nih makin banyak belajar css disini makasih infox gan
Unknown
Kerja bagus teman
Dixy
kalau fluid ...??
Taufik Nurrohman
@KIDFiveThree Fluid yang dimaksud mungkin mengarah ke
fixed
atau mengambang.Dixy
@KIDFiveThree bukannya mengikuti ukuran layar...??
Taufik Nurrohman
@KIDFiveThree Kalau mengarahnya ke situ artinya salah alamat mas. Harusnya kita masuknya ke CSS Float atau Media Queries, bukan CSS Posisi :)
Terkait: Layout Tiga Kolom dengan CSS Float, Media Queries, Saatnya Memulai Proyek Desain Website yang Responsif
Dixy
@Taufik Nurrohman ooo begitu rupanya ^_^ sekarang saya tau...
GlamFather
Wow..
trimakasih tutorialnya bos...
manffat sekali...
salam.. :)
Unknown
Saya punya problem dengan men melayang, menunya itu tertutup dengan code Posisi:relative.. objek yang laiinnya.. cara mengatasinya gimana ych mas..
Taufik Nurrohman
Perbesar nilai
z-index
di CSS. Semakin besar semakin bagus, tapi jangan terlalu besar.Unknown
Master Bisa Bantu Saya ...
Ini Kenapa Ya.. ??? Ada Titik Titik Hitam.. Cara ngatasinya Gimana..???
Unknown
Bisa Bantu Ga Master
IRIL SAGITA
Sekedar bantu, yang aku tau titik-titik adalah elemen yang terdapat pada UL atau LI, biasanya ada pada menu blog jika di buka dari pengeditan tata letak blogger tampilan menu menjadi titik-titik.
Semoga penjelasanku bisa dipahami.
Unknown
Aku pernah kejadian seperti itu. Malah posisi elemen gadgetnya pada berantakan semua. tetapi sejak aku ganti template, udah ilang tuh titik-titik.
budkalon
Asalkan tamplan blog gak acak-acakan, diemin aja, daripada diotak-atik nantinya malah rusak blognya.
Unknown
Thanks/..
Andry Fadrie Kuswandani
kang,ini syntax highliter nya pake apaan <3 share atuh kang
Taufik Nurrohman
⇒ /2012/09/syntax-highlighter-dengan-prism.html?showComment=1362493246789#c8544828114478662092