CSS Display dan CSS Position
CSS Display: Bagaimana Sebuah Elemen Ditampilkan
Dengan atau tanpa kita sadari, kita sudah menerapkan konsep CSS Display pada materi sebelumnya mengenai tata letak pada halaman web. Properti display mengatur bagaimana sebuah elemen harus ditampilkan, contohnya dengan nilai flex dan grid tersebut.
Namun secara natural, setiap elemen sebenarnya sudah memiliki properti display masing-masing. Contohnya elemen <div> yang sedari awal sudah memiliki properti display: block. Itulah sebabnya jika beberapa elemen div ditampilkan, mereka akan berjejer ke bawah, karena sebuah elemen div saja sudah memenuhi halaman web secara horizontal (dari kiri ke kanan halaman).
Berbeda jika menampilkan beberapa elemen <a>, maka semua elemen tersebut akan berjejer ke samping. Hal ini dikarenakan elemen tersebut memiliki properti display: inline secara natural. Berikut ini beberapa nilai yang dapat digunakan pada properti display.
block: Elemen akan ditampilkan sebagai blok dan mengambil seluruh lebar yang tersedia, sehingga elemen-elemen berikutnya akan muncul di bawahnya.inline: Elemen akan ditampilkan dalam satu baris sepanjang konten yang ada di dalamnya, tanpa memaksa elemen lain untuk pindah ke baris baru.inline-block: Mirip denganinline, tetapi Anda dapat mengatur lebar dan tinggi elemen.flex: Membuat elemen menjadi kontainer Flexbox.grid: Membuat elemen menjadi kontainer Grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan Properti CSS Display</title>
<style>
.box {
display: inline-block; /* Ubah ke block, inline, atau jenis lainnya */
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>Pada contoh kode di atas, kita memberikan mengubah nilai dari properti display pada setiap elemen div sehingga mereka dapat berjejer ke samping. Sekilas mungkin terlihat mirip dengan penggunaan flexbox. Namun kita tidak dapat menggunakan properti-properti berguna lainnya seperti yang kita gunakan di materi mengenai flexbox.
CSS Position
Sebuah elemen CSS jika ditampilkan bersamaan tidak akan saling menumpuk (jika sifatnya bukan container dan child). Namun terkadang, kita menginginkan sebuah elemen untuk keluar dari flow semestinya. Conyohnya ketika ingin membuat sebuah elemen header yang tetap tampil di atas meskipun kita melakukan scroll hingga ke bawah halaman.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header Example</title>
<style>
/* Style for the sticky header */
.sticky-header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: sticky;
top: 0;
z-index: 100;
}
/* Style for the content below the header */
.content {
padding: 20px;
/* Add some content to push the header down */
margin-top: 80px; /* Adjust as needed based on header height */
}
/* Add some styles for the header when it becomes sticky */
.sticky-header.sticky {
background-color: #555;
/* Add any additional styles for the sticky header */
}
</style>
</head>
<body>
<header class="sticky-header">
<h1>My Sticky Header</h1>
</header>
<div class="content">
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel leo nec justo volutpat tincidunt.</p>
<!-- Add more content here -->
</div>
<div class="content">
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel leo nec justo volutpat tincidunt.</p>
<!-- Add more content here -->
</div>
<div class="content">
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel leo nec justo volutpat tincidunt.</p>
<!-- Add more content here -->
</div>
<div class="content">
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel leo nec justo volutpat tincidunt.</p>
<!-- Add more content here -->
</div>
<div class="content">
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel leo nec justo volutpat tincidunt.</p>
<!-- Add more content here -->
</div>
</body>
</html>Pada kode di atas, kita mengubah nilai properti position pada komponen header menjadi sticky agar komponen tersebut letaknya tetap dan hilang jika kita scroll halamannya.
static(nilai default): Elemen akan mengikuti alur normal dokumen.relative: Elemen akan bergantung pada posisi aslinya dan dapat digeser menggunakan propertitop,right,bottom, atauleft.absolute: Elemen akan diposisikan relatif terhadap elemen yang memilikiposition: relativeterdekat atau elemen<body>jika tidak ada elemen denganposition: relative.fixed: Elemen akan selalu ditampilkan pada posisi yang sama di dalam jendela browser, bahkan saat halaman di-scroll.
Contoh penggunaan position relative dan absolute adalah ketika kita membuat komponen tooltips seperti contoh di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
/* Style for the tooltip container */
.tooltip-container {
text-align: center;
margin-top: 50px;
}
/* Style for the tooltip button */
.tooltip-button {
position: relative;
display: inline-block;
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
/* Style for the tooltip text */
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
/* Show the tooltip text on hover */
.tooltip-button:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip-container">
<button class="tooltip-button">Hover me
<span class="tooltiptext">This is a tooltip</span>
</button>
</div>
</body>
</html>
Kode di atas mungkin akan terlihat rumit bagi kita untuk saat ini, tapi jangan khawatir. Coba fokuskan perhatian teman-teman ke posisi dari sebuah komponen tooltips terhadap tombol tersebut.
Kita memanfaatkan nilai relative dan absolute untuk membuat elemen span berisi teks tersebut selalu menyesuaikan posisi dari tombolnya bahkan jika letak dari tombol tersebut diubah. Kedua nilai tersebut akan sering kita gunakan untuk penggunaan seperti contoh di atas.
Referensi
https://www.w3schools.com/cssref/pr_class_display.php https://www.w3schools.com/css/css_positioning.asp https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
Last updated