Aseprohimatea - Tutorial Lengkap Memahami CSS Position, admin akan sedikit bahas apa itu css position dan bagaimana cara menerapkannya ke dalam HTML.
Namun sebelum melangkah lebih jauh ke pembahasan memahami css position ada baiknya kita akan simak terlebih dahulu apa itu css position dan betapa pentingnya untuk design web.
Daftar Isi
Apa itu CSS Position ?
CSS Position adalah salah satu property dalam Cascading Style Sheets (CSS) yang digunakan untuk mengontrol posisi elemen di dalam dokumen HTML. Property ini memungkinkan pengguna untuk menentukan bagaimana suatu elemen ditempatkan di halaman web, apakah itu relatif terhadap elemen lain atau absolut terhadap viewport atau area yang ditentukan.
Ada beberapa nilai yang dapat digunakan untuk memahami CSS Position, antara lain:
- Static: nilai default untuk setiap elemen. Elemen yang menggunakan nilai ini akan ditempatkan di dalam halaman sesuai dengan alur dokumen HTML.
- Relative: nilai yang membuat elemen tetap berada di dalam alur dokumen HTML, tetapi dapat digeser posisinya dengan nilai top, bottom, left, atau right.
- Absolute: nilai yang membuat elemen berada pada posisi yang ditentukan terhadap area yang terdekat yang memiliki posisi relatif atau absolute. Nilai top, bottom, left, dan right digunakan untuk menentukan posisi elemen.
- Fixed: nilai yang membuat elemen tetap berada pada posisi yang ditentukan relatif terhadap viewport, bahkan jika halaman di-scroll.
- Sticky: nilai yang membuat elemen tetap berada pada posisi yang ditentukan relatif terhadap viewport saat sebelum mencapai posisi tertentu saat di-scroll, kemudian berubah menjadi posisi fixed.
CSS Position sangat penting dalam desain web karena memungkinkan pengguna untuk mengatur tata letak elemen dalam dokumen HTML. Dengan memanfaatkan CSS Position, pengguna dapat membuat tata letak yang fleksibel dan responsif untuk website mereka.
Tutorial Memahami CSS Position Contoh dan Penggunaan
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mendesain halaman web. Salah satu fitur utama dari CSS adalah kemampuannya untuk mengatur posisi elemen pada halaman web. CSS memiliki beberapa properti posisi yang memungkinkan pengguna untuk menentukan bagaimana elemen HTML tertentu ditempatkan pada halaman web. Dalam tutorial ini, saya akan membahas secara lengkap CSS position dan bagaimana cara menggunakannya.
1. Pengenalan
CSS position digunakan untuk menentukan posisi sebuah elemen pada halaman web. Ada beberapa nilai yang dapat digunakan pada properti position, yaitu static, relative, absolute, fixed, dan sticky. Masing-masing nilai memiliki fungsi dan cara penggunaan yang berbeda-beda.
2. Nilai Position
a. Static
Nilai static adalah nilai posisi default dari sebuah elemen pada halaman web. Dengan nilai static, sebuah elemen akan ditempatkan pada posisi yang ditentukan oleh alur dokumen. Artinya, elemen tersebut akan ditempatkan pada posisi normalnya pada halaman web dan tidak dapat dipindahkan dengan properti posisi.
Contoh:
<div style="position: static;">
<p>Ini adalah sebuah paragraf.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Pada contoh di atas, elemen div memiliki nilai position: static. Oleh karena itu, elemen tersebut akan diatur sesuai alur dokumen normal, dan tidak akan dipengaruhi oleh properti top, bottom, left, dan right. Semua elemen di dalamnya akan tetap berada pada posisi awalnya di dalam alur dokumen.
b. Relative
Nilai relative digunakan untuk menentukan posisi elemen berdasarkan posisi awalnya pada halaman web. Jadi, jika kita memberikan nilai relative pada sebuah elemen, maka kita dapat menggeser posisi elemen tersebut dengan properti top, bottom, left, atau right.
Contoh:
<div style="position: relative; left: 50px; top: 20px;"> <p>Ini adalah sebuah paragraf dengan posisi relative</p> </div>
Dalam contoh ini, properti position: relative diterapkan pada elemen, sehingga elemen tersebut memiliki konteks posisi relatif terhadap posisi normalnya di dalam halaman web. Kemudian, properti left: 50px dan top: 20px diterapkan pada elemen, sehingga elemen tersebut akan dipindahkan 50 piksel ke kanan dan 20 piksel ke bawah dari posisi normalnya.
Dengan menggunakan position: relative, kita dapat mengatur ulang posisi suatu elemen pada halaman web tanpa mempengaruhi posisi elemen lainnya.
c. Absolute
Nilai absolute digunakan untuk menentukan posisi elemen relatif terhadap parent elemennya yang memiliki posisi non-static. Artinya, jika kita memberikan nilai absolute pada sebuah elemen, maka elemen tersebut akan ditempatkan pada posisi yang dihitung dari parent elemennya yang memiliki posisi non-static. Jika tidak ada parent elemen yang memiliki posisi non-static, maka posisi elemen tersebut akan dihitung dari body.
Contoh:
<div style="position:relative;"> <div style="position:absolute; top:10px; left:20px;">Absolute Position</div> </div>
Dalam contoh di atas, elemen div kedua diberikan nilai absolute. Karena parent elemennya memiliki posisi relative, maka elemen div kedua akan ditempatkan pada posisi yang dihitung dari posisi parent elemennya yang memiliki posisi relative.
Contoh kedua:
- Membuat overlay pada gambar Ketika ingin menambahkan overlay pada sebuah gambar, kita bisa menggunakan position: absolute untuk membuat elemen overlay mengambang di atas gambar.
- Menempatkan elemen pada posisi tertentu
Ketika ingin menempatkan elemen pada posisi tertentu dalam container, kita bisa menggunakan position: absolute dan menentukan nilai top, bottom, left, atau right.
.container { position: relative; width: 400px; height: 400px; } .abs-elem { position: absolute; top: 50px; left: 50px; width: 200px; height: 200px; background-color: #ff0000; } - Membuat menu navigasi fixed Ketika ingin membuat menu navigasi yang selalu tetap di atas layar ketika pengguna melakukan scroll, kita bisa menggunakan position: absolute dan menentukan nilai top.
.container {
position: relative;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.navbar {
position: absolute;
top: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
}
d. Fixed
Nilai fixed digunakan untuk menentukan posisi elemen yang selalu ditampilkan pada posisi yang sama pada halaman web, meskipun pengguna menggulir halaman. Artinya, jika kita memberikan nilai fixed pada sebuah elemen, maka elemen tersebut akan tetap ditampilkan pada posisi yang sama pada layar pengguna.
Contoh:
<div style="position:fixed; top:10px; left:20px;">Fixed Position</div>
Atau bisa juga seperti ini
<nav style="position: fixed; top: 0; left: 0; width: 100%; background-color: #fff;">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
Dalam contoh di atas, elemen div 'd' dan elemen nav akan tetap terlihat di bagian atas layar ketika halaman digulir karena kita menggunakan position: fixed dan menetapkan top: 0 dan left: 0 untuk menempatkannya di bagian atas kiri layar. Kita juga menetapkan width: 100% agar elemen tersebut mengisi seluruh lebar layar dan background-color: #fff; untuk memberikan latar belakang putih pada elemen tersebut.
e. Sticky
CSS 'position: sticky' digunakan untuk menempelkan elemen pada posisi tertentu dalam dokumen saat digulir, namun tetap mengikuti aliran dokumen ketika mencapai batas tertentu. Ini sangat berguna untuk membuat elemen navigasi, judul halaman, atau tajuk tabel tetap terlihat saat pengguna menggulir konten.
Berikut adalah contoh penggunaan position: sticky pada sebuah elemen:
<!DOCTYPE html>
<html>
<head>
<style>
header {
position: sticky;
top: 0;
background-color: #f2f2f2;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Contoh Header</h1>
</header>
<main>
<p>Ini adalah isi dokumen. Saat digulir, header akan tetap terlihat pada posisi teratas dokumen.</p>
</main>
</body>
</html>
Semoga tutorial lengkap memahami position css ini bisa bermanfaat untuk Anda semua termasuk saya yang masih terus belajar dan belajar.
Demikian, sedikit ulasan tutorial css position atau mengatur posisi css yang sederhana ini, kalau dirasa ini bermanfaat bantu bagikan kepada teman-teman lainnya.
Penutup
Dengan menggunakan CSS:POSITION, Anda dapat mengatur posisi elemen HTML pada halaman web sesuai dengan kebutuhan desain Anda. Namun, Anda juga harus berhati-hati dalam menggunakannya karena pengaturan yang salah dapat membuat halaman web Anda menjadi tidak responsif atau sulit diakses oleh pengguna.