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">

..
..
..

avatar HabibulUmam
@HabibulUmam

59 Kontribusi 10 Poin

Diperbarui 4 tahun yang lalu

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

avatar rizalspid
@rizalspid

21 Kontribusi 6 Poin

Dipost 4 tahun yang lalu

Jawaban Terpilih

coba tambahkan position: relative pada .content, karena z-index bekerja hanya pada saat position dideklarasikan.

avatar ledihildawan
@ledihildawan

23 Kontribusi 16 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban