Property z-index pada css - apa itu z-index serta fungsi dan cara menggunakan?.
Apa itu z-index?
z-index adalah property pada css yang memungkinkan untuk membuat beberapa element "a pile" atau tumpukan seperti memindahkan urutan elemen A kedepan elmen B yang sebelumnya elemen A berada di belakang elemen B dengan menggunakan value lebih tinggi dari value lawannya.
Bagaimana penggunaan nya?
property z-index menentukan urutan tumpukan pada elemen html ataupun sejenisnya.
Elemen dengan urutan tumpukannya lebih besar akan selalu di depan elemen dengan urutan tumpukan yang lebih rendah.
Catatan: element dengan property z-index hanya bisa berfungsi pada elemen yang diposisikan dengan position: absolute, position: relative, position: fixed, atau position: sticky.
css value dalam property z-index
Nah untuk value dalam property z-index di bagi menjadi empat bagian seperti yang tertulis di bawah ini:
1. Auto
2. Number
3. Initial
4. Inherit
1. value auto pada property z-index
Untuk value auto pada property z-index, Aturan atau urutan tumpukan sama tetap dengan parent nya (elemen induk) seperti.
2. value number pada property z-index
Sekarang untuk Value number pada property z-index, yaitu dimana tumpukan elmen dapat di atur sesuai kemauan sendiri dengan menggunakan:
contoh:
z-index:1; (harus lebih besar dari nilai lawan jika ingin berada dalam tumpukan paling depan, dan sebaliknya jika ingin berada di tumpukan paling belakang).
3. value initial pada property z-index
Dengan menyetel property ini ke nilai default nya, untuk contoh nya tidak jauh berbeda seperti halnya value auto, namun yang membedakan ialah:
auto
Untuk auto bisa saja mengikuti tumpukan (tergantung dari property jika misalnya color: maka akan menjadi warna) dari parent nya atau bisa disebut juga element induk.
apa itu element parent
Element parent adalah suatu elemen yang dimana membungkus sebuah elemen dalam, jika kamu tidak paham coba kamu perhatikan ht di bawah ini, dan seperti itulah elementt parent tersebut jika di jelaskan.
Contoh:
<div class="parent">
<h1>Inilah element children</h1>
</div>
Penjelasan:
Nah cobalah kamu perhatikan elemen <div yang membungkus sebuah elemen <h1 (Element children)
Lalu manakah yang disebut element parent?
Jawaban: untuk element parent nya adalah elemen <div kenapa karena element <div membungkus sebuah elemen children yaitu elemen <h1
Kenapa element <h1 di sebut element children atau element anakan?.
Jawaban: Karena elemnt <h1 children tersebut berada dalam elemen yang membungkus element <h1 tersebut, sehingga elemnt <h1 tersebut berada dalam elemen <div.
initial
Untuk Value initial ialah, jika dengan menyetel property ini berarti tumpukan pada elemen tersebut, akan berbeda dengan elemnt parent tersebut
Untuk contohnya, kita akan mengambil contoh sederhana dengan manfaatkan color: initial; kamu salin dan tempelkan html di bawah ini kedalam html editor kamu dan selanjutnya pertinjau > perhatikan!
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: red;
border: 1px solid blue;
}
h1 {
color: initial;
}
</style>
</head>
<body>
<div>
<h1>Initial</h1>
<p>The header above and this paragraph is inside a DIV element, The DIV element has the color property set to "red". The header element has its color property set to "initial", which in this case is "black".</p>
</div>
<p><b>Note:</b> The "initial" keyword is not supported in Internet Explorer 11 and earlier versions, or in Opera 15 and earlier versions.</p>
</body>
</html>
Penjelasan:
Coba kamu perhatikan <h1 di atas dan <p ini berada di dalam elemen <div, elemen <div memiliki properti warna yang diatur ke "merah". Elemen <h1 memiliki properti warna yang diatur ke "awal", yang dalam hal ini adalah "hitam".
Kenapa mengabil contoh dari color: initial;
Jawaban: karena jika saya mengabil contoh z-index: initial; maka hasilnya tidak terlihat oleh kamu hayanya akan nampak auto saja, tapi untuk fungsi sama dengan contoh ini
Catatan:
Kata kunci initial digunakan untuk mengatur properti CSS ke nilai defaultnya.
Kata kunci initial dapat digunakan untuk properti CSS apa pun, dan pada elemen HTML apa pun.
P
Kata kunci "initial" tidak didukung di Internet Explorer 11 dan versi yang lebih lama, atau di Opera 15 dan versi yang lebih lama.
4. value inherit pada property z-index
Untuk Value inherit pada property z-index, menentukan bahwa suatu properti harus mewarisi nilainya dari elemen parent nya (induk).
Kata kunci inherit dapat digunakan untuk properti CSS apa pun, dan pada elemen HTML apa pun.
Untuk contoh nya adalah sebaliknya dari color: inherit; tidak jauh berbeda dan akan terjawab sendiri melalui praktek kamu nantinya.
Template property z-index pada css serta contoh penjelasan lengkap akan terlihat rapi walaupun view-port browser berbeda
Template sudah di desain SEO Friendly mulai dari breadcrumb yang sudah terindex google sampai schema markup lainnya yang paling penting dalam mesin pencari
Sangat mudah untuk mengubah warna, lebar sampai font melalui Desainer Tema Blogger termasuk pengaturan widget pada menu Layout
Sudah disediakan slot iklan adsense yang siap pakai pada lokasi dengan click rate tinggi dan tidak menghalanginya saat pengguna membaca postingan, anda tinggal mengatur dalam menu layout blogger
Dioptimalkan dengan memperkecil ukuran template seperti kompres CSS dan Javascript agar loading lebih cepat dan tidak menjengkelkan pengguna
Didesain dengan lebih mengutamakan tampilan mobile, tampilannya dibuat modern dan lebih user friendly layaknya sebuah aplikasi mobile, apakah kamu tau?, survey menyatakan bahwa lebih banyak pengguna mobile yang melintas pada google dibandingkan perangkat dekstop
Mendukung berbagai browser berbeda seperti chrome, firefox, Opra, iE dan sebagainya
property z-index pada css serta contoh penjelasan lengkap
Penting!..
Tuliskan link web/blog anda yang ingin menggunakan template property z-index pada css serta contoh penjelasan lengkap dengan benar karena ini digunakan untuk verifikasi lisensi otomatis, jika salah maka template tidak bisa digunakan pada domain tersebut
Jika anda memiliki lebih dari satu, maka tuliskan sekaligus link web/blog anda dengan format
[domain-1.com] [domain-2.com] [domian-3.com]
Maksimal 3 domain utama/sub domain jika lebih link ke 4 dan seterusnya dianggap tidak ada
Tuliskan link web/blog anda yang ingin menggunakan template property z-index pada css serta contoh penjelasan lengkap dengan benar karena ini digunakan untuk verifikasi lisensi otomatis, jika salah maka template tidak bisa digunakan pada domain tersebut
Jika anda memiliki lebih dari satu, maka tuliskan sekaligus link web/blog anda dengan format
[domain-1.com] [domain-2.com] [domian-3.com]
Maksimal 3 domain utama/sub domain jika lebih link ke 4 dan seterusnya dianggap tidak ada
Total Pembayaran
Tidak ada komentar:
Posting Komentar