Mengatasi dan Mengatur Overlapping Element dengan CSS - Sebelum memulai membaca ini, sebaiknya merujuk terlebih ke pembahasan tentang Cara Mengatur CSS position. Karena overlapping elemen ini merupakan bagian sekaligus kelanjutan dari CSS position.
Saat kita membuat halaman yang terdiri dari beberapa elemen, maka kita perlu mengaturnya agar tidak terjadi overlapping (tumpang-tindih) antar elemen HTML.
Namun kita juga bisa mengatur elemen yang tumpang tindih tersebut agar terlihat rapi dan indah. Elemen mana yang akan ditempatkan di bawah atau di atas elemen lain. Untuk menerapkan ini maka properti CSS yang digunakan adalah z-index.
Nilai z-index bisa berupa nilai positif (+) atau negatif (-). Nilai z-index yang lebih kecil akan berada di bawah elemen yang nilai z-index nya lebih besar. Elemen yang position nya diatur dengan z-index bernilai negatif, maka akan berada di belakang/ditindih elemen lain. Sebaliknya, jika nilainya positif berarti posisi elemen tersebut berada di depan elemen lain.
Sebagai contoh, di bawah ini adalah overlapping elemen antara gambar dan teks. Gambar diatur supaya berada di belakang teks. Maka properti CSS yang digunakan adalah z-index bernilai negatif.
hasilnya :
Itulah sedikit ulasan tentang overlapping element, yaitu situasi di mana terjadi tumpang tindih antar elemen HTML dan bagaimana cara mengatasi serta mengaturnya menggunakan properti CSS. Semoga bermanfaat untuk konco sinahu.
Saat kita membuat halaman yang terdiri dari beberapa elemen, maka kita perlu mengaturnya agar tidak terjadi overlapping (tumpang-tindih) antar elemen HTML.
Namun kita juga bisa mengatur elemen yang tumpang tindih tersebut agar terlihat rapi dan indah. Elemen mana yang akan ditempatkan di bawah atau di atas elemen lain. Untuk menerapkan ini maka properti CSS yang digunakan adalah z-index.
Nilai z-index bisa berupa nilai positif (+) atau negatif (-). Nilai z-index yang lebih kecil akan berada di bawah elemen yang nilai z-index nya lebih besar. Elemen yang position nya diatur dengan z-index bernilai negatif, maka akan berada di belakang/ditindih elemen lain. Sebaliknya, jika nilainya positif berarti posisi elemen tersebut berada di depan elemen lain.
Sebagai contoh, di bawah ini adalah overlapping elemen antara gambar dan teks. Gambar diatur supaya berada di belakang teks. Maka properti CSS yang digunakan adalah z-index bernilai negatif.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>Ini Contoh Overlapping Element</h1>
<img src="url gambar" width="100" height="140">
<p>Karena gambar menggunakan z-index -1, maka gambar diletakkan di belakang teks.</p>
</body>
</html>
hasilnya :
0 Komentar untuk "Mengatasi dan Mengatur Overlapping Element dengan CSS"