Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Z-index tidak berfungsi
-gambar diatas adalah .gif-
Seperti pada gambar diatas,,, kenapa ya, gambar foto saya kok gak bisa ketimpa ama ".content" yang udah saya beri z-index lebih besar.
idenya tuh, kalo di scroll gambar nya akan sembunyi dibalik ".content"
ini css saya...
.layer1 {
position: relative;
width: 100%;
height: 500px;
z-index: 99;
background-image: linear-gradient(180deg, #00000000, #1b1b1b);
}
.image {
width: 400px;
height: 400px;
position: absolute;
bottom: 0%;
left: 60%;
z-index: 999;
}
.fade {
transform: translateY(90%);
transition: all 0.5s ease;
z-index: 99 !important;
}
.show {
transform: translateY(0%);
transition: all 0.5s ease;
z-index: 99;
}
.front {
z-index: 9999;
}
.content {
z-index: 9999;
}
ini jquery/javascript saya...
$(document).ready(function () {
$(window).scroll(function () {
var x = $(window).scrollTop();
if (x >= 64) {
$('nav').addClass('nav-fixed');
$('.image').addClass('fade');
$('.image').removeClass('show');
} else {
$('nav').removeClass('nav-fixed');
$('.image').removeClass('fade');
$('.image').addClass('show');
}
});
});
dan ini html... (bila perlu)
<body>
<div class="navbar-fixed">
<nav class="transparent z-depth-0">
<div class="nav-wrapper container">
<a href="#" class="brand-logo black-text">BillBull</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="waves-effect waves-light btn" href="profile.html">Profile</a></li>
</ul>
</div>
</nav>
</div>
<div class="content-wrapper">
<div class="jumbotron">
<div class="layer1">
<img class="image" src="assets/img/bibul.png" />
<div class="container" style="padding-right: 300px;">
<h2 class="title">Being Perfect without compromise!</h2>
</div>
</div>
</div>
<div class="content">
<div class="container">
..
..
..
Tanggapan
saya kurang paham maunya bagaimana gan?
sudah fix gan,
kalau sudah, silahkan ditulis jawabannya, dan ditandai sebagia jawaban benar gan, teirimakasih
2 Jawaban:
mungkin gara2 ini <pre> .image{ position : absolute } </pre>
maaf kalo salah, hehe :D
Jawaban Terpilih
coba tambahkan position: relative pada .content, karena z-index bekerja hanya pada saat position dideklarasikan.
