Anda dapat menentukan jenis penempatan untuk suatu area atau elemen. Digunakan properti position untuk itu. Properti ini menunjukkan bagaimana suatu elemen akhirnya akan ditempatkan. Secara keseluruhan, ada empat variasi penempatan yang tersedia.
• static - tidak ada penempatan khusus dilakukan dan aliran teks normal berlangsung.
• relative - terjadi penempatan relatif yang mengikuti posisi normal atau posisi awal elemen.
• absolute - terjadi penempatan absolut melalui properti top, bottom, left, dan right. Elemen yang ditempatkan secara absolut berada di luar aliran teks normal. Posisi absolut dihitung relatif terhadap tepi elemen induk (namun hanya jika elemen induk tersebut tidak memiliki properti position: static).
• fixed - elemen ditempatkan secara absolut. Ketika di-scroll, elemen tetap pada tempatnya.
Dua varian pertama memungkinkan penempatan variabel. Di sini, elemen ditempatkan satu sama lain. Dua contoh berikut menunjukkan bagaimana penempatan semacam ini bisa terjadi:
• Elemen 2 ditempatkan tergeser 30 piksel terhadap Elemen 1.
• Elemen 2 ditempatkan di belakang Elemen 1.
Berbeda dengan fixed dan static. Dengan ini, elemen dapat ditempatkan di tempat-tempat tertentu. Informasi penempatan ini merujuk pada elemen induk atau jendela browser. Contoh:
• Elemen 1 ditempatkan tepat 30 piksel dari kanan dan 20 piksel dari atas jendela browser.
Selanjutnya, berbagai variasi penempatan akan dijelaskan secara lebih rinci. Namun sebelumnya, sebuah catatan: dalam konteks penempatan elemen, konsep "floating" memainkan peran penting. Saya akan menjelaskan prinsip CSS penting ini secara rinci dalam tutorial berikutnya. Pada dasarnya, floating ini berkaitan dengan bagaimana elemen-elemen halaman web mengalir dalam dokumen. Elemen-elemen tersebut ditekan sejauh mungkin ke arah yang sesuai. Melalui jenis penempatan ini, aliran elemen dapat ditentukan secara jelas.
Penempatan Relatif
Dengan menggunakan penempatan relatif melalui position: relative, terjadi dua hal:
• Kotak akan digeser dari aliran normalnya.
• Tempat asli elemen itu akan tetap terpatri.
Dengan mempertahankan tempat aslinya, elemen lain akan berperilaku seolah-olah elemen itu masih berada di tempatnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Kotak 1</div>
<div>Kotak 2</div>
<div>Kotak 3</div>
</body>
</html>Tiga kotak telah diatur di sini.
Kotak 2 dan 3 tidak menerima instruksi penempatan, sehingga mereka mengikuti aliran dokumen normal. Namun, Kotak 1 didesain dengan posisi relatif. Karena itu, Kotak 2 dan 3 tidak terpengaruh oleh Kotak 1. Lokasi Kotak 1 tidak memengaruhi kotak-kotak lain ini. Melalui penjelasan top, bottom, left, dan right, penempatan kotak-kotak dilakukan. Dalam penempatan relatif ini, posisi dihitung berdasarkan posisi asli di aliran dokumen (Flow).
• top: 25px - kotak digeser ke bawah 25 piksel. Di posisi normal kotak, akan ditambahkan 25 piksel di bagian atas.
• right: 25px - kotak digeser ke kiri 25 piksel. Di posisi normal kotak, akan ditambahkan 25 piksel di bagian kanan.
Pengukuran piksel bersifat relatif terhadap posisi asli. Pengukuran tersebut menentukan di mana nilai akan dimasukkan, yaitu di bagian atas dan kanan. Hal ini sangat penting. Pengukuran tidak menentukan ke mana kotak akan digeser.
Penempatan Absolut
Selanjutnya adalah penempatan absolut. Jenis penempatan ini sepenuhnya mengeluarkan elemen dari aliran. Elemen lain di halaman berperilaku seolah-olah elemen tersebut tidak ada sama sekali.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Kotak 1</div>
<div>Kotak 2</div>
<div>Kotak 3</div>
</body>
</html>Di sini juga tiga kotak telah diatur. Kotak 1 ditempatkan secara absolut.
Berbeda dengan penempatan relatif, tidak ada ruang yang dipesan untuk Kotak 1. Kotak 2 dan 3 akan bergeser ke atas.
Penentuan posisi top, right, bottom, atau left sekarang tidak lagi berdasarkan posisi asli Kotak dalam aliran. Sebaliknya, informasi tersebut merujuk pada elemen tertentu yang diatur dengan relative, absolute, atau fixed. Jika tidak ada elemen sekitar, penentuan posisi dilakukan berdasarkan elemen paling atas dalam pohon dokumen, yaitu html.
Posisi dengan fixed
Dengan menggunakan position: fixed, elemen dapat difixasi. Berikut adalah contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Efek Splitter Bagian 1</div>
<p>Hanya untuk waktu yang singkat, tutorial atau video training terbaru dapat dilihat secara online atau konten dari kategori unduhan tanpa biaya. Pelajari selengkapnya disini...</p>
</body>
</html>Kotak yang difixasi tidak mengikuti pergerakan scrolling, melainkan tetap berada pada posisi yang telah ditentukan.
Untuk kotak yang difixasi, elemen sekitarnya selalu menjadi jendela peramban.
Harap diperhatikan bahwa terdapat masalah yang signifikan terutama terkait dengan penjepitan elemen pada browser-brower kuno. Sebagai contoh, IE6 tidak melakukan apa yang seharusnya dilakukannya. Bagi yang ingin/mesti mengoptimalkan situs web mereka juga untuk browser ini, memiliki dua pilihan:
• Menyiasati kotak-kotak yang difixasi.
• Menggunakan trik untuk IE.
Jika Anda ingin menggunakan trik, saya sarankan Anda kunjungi halaman http://thestyleworks.de/tut-art/iewinfixed.shtml. Di sana akan ditunjukkan cara menyesuaikan kotak-kotak yang difixasi untuk browser ini menggunakan sedikit JavaScript.
