Postingan lainnya
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.
