property z-index pada css serta contoh penjelasan lengkap

property z-index pada css serta contoh penjelasan lengkap
css z-index property

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.

1 komentar:

  1. Best Betting Websites in South Korea for 1xbet Korean - Legalbet
    1xbet.com is one of the best betting sites in South Korea. Read our reviews 1xbet and find out how to クイーンカジノ use the site on your Android and iOS betway login phone.

    BalasHapus

MAGZPRO

Template blogger yang bersih yang di optimalkan serta valid schema markup dan cepat


Beli harga turun 95rb