CSS: Z-Index, Pengunaan Lain Witdh dan Height
Buat html sederhan seperti dibawah
<body>
<div class="pertama"></div>
<div class="kedua"></div>
<div class="ketiga"></div>
</body>
Styling sederhana seperti dibawah
div{
width: 200px;
height: 200px;
position: absolute;
}
.pertama{
background-color: red;
}
.kedua{
background-color: blue;
}
.ketiga{
background-color: greenyellow;
}
Maka box akan bertumpuk dari box 1 paling bawah dan box 3 paling atas, jika ingin memindahkan pada tiap boxnya kalian harus ubah urutan div pada html, contohnya seperti div box 1 pindah menjadi div box 3. Itu adalah cara yang kurang efektif.
Beri jarak ukuran pada tiap-tiap box
.kedua{
background-color: blue;
left: 100px;
}
.ketiga{
background-color: greenyellow;
left: 200px;
}
Bisa dilihat bahwa pada tiap-tiap box terjadi penumpukan dari box 1 hingga box 3
Beri Z-Index pada box kedua.
.kedua{
background-color: blue;
left: 100px;
z-index: 1;
}
Maka box kedua lah yang berada pada tumpukan box yang lainnya. Itu karna hanya box kedua yang diberi nilai Z-Index maka box yang lainnya bernilai 0, Semakin besar angka yang diberi pada Z-Index maka dia akan berada paling atas. Jika diberi nilai (-) pada Z-Index maka dia akan semakin tertumpuk oleh box-box lainnya.
Buat html sederhana sepeerti dibawah.
<body>
<div class="topbar"></div>
<h1>Hallo Warga Bumi</h1>
<h2>Selamat Datang di Langit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
maxime nulla et sed laborum quos perspiciatis. Cumque neque velit
magnam maxime. Sequi quae ad nostrum, praesentium laborum deleniti
in nobis explicabo voluptatibus, accusamus culpa error magni
pariatur? Accusantium et itaque, assumenda obcaecati culpa debitis
perspiciatis voluptate vero hic, reprehenderit dolorum officiis
dolor sed alias? Ea maxime tempora nulla autem ex quasi quia ipsa,
itaque, esse quidem perspiciatis accusamus a nobis eos! Saepe,
exercitationem facere dolorum nostrum atque explicabo quidem r
eiciendis earum vero beatae sed. Aperiam quisquam optio, volupt
atibus in facilis debitis adipisci iusto, inventore aspernatur l
audantium nisi. Laudantium, repudiandae nemo? Lorem ipsum dolor s
it amet consectetur, adipisicing elit.
Ratione, repellat quas id voluptatibus debitis sit doloremque
illo repudiandae exercitationem. Magni voluptatibus commodi
deleniti amet quia perspiciatis voluptates esse dolorem delectus?</P>
</body>
Beda dengan margin dan padding, ini hanya menggunakan posisi arahnya saja bisa dibilang ini adalah style menarik sebuah element pada posisi yang dinginkan. Jika nilai 0 maka akan menarik dan jika bernilai maka mengulur.
body{
height: 1000px;
}
.topbar{
background-color: lightgreen;
position: fixed;
top: 0px;
right: 400px;
bottom: 400px;
left: 400px;
opacity: 40%;
}
h1{
margin-top: 50px;
}
Inilah hasilnya.
Komentar
Posting Komentar