Problem z nachodzeniem elementów na siebie.

pytanie zadane 22 kwietnia 2017 w HTML i CSS przez MixTape Użytkownik (560 p.)

Witam, nie orientuje się czy było coś podobnego, mam jednak problem z nachodzeniem na siebie elementów. Mianowicie, mam sobie pasek "nawigacyjny"przyklejony do góry strony z position "fixed". W nim "menu1" z pozycją "relative", a do tego jest rozwijane menu mobilne również z position "fixed". Chodzi mi o to, że przewijając stronę w dół pozostała zawartość strony nachodzi na te elementy fixed. Czy jest jakiekolwiek rozwiązanie na ten problem poza z-index? Czy na dzień dzisiejszy jest to rozwiązanie jedyne. Podsyłam kod dodatkowo.

nav{
    background-color:#000;
    width:100%;
    height:50px;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}



#menu-1{
    display:block;
    width:35px;
    cursor: pointer;
    padding:3px;
    position:relative;
    top:0;
    left:0;

#bo{
    display:block;
    width:100%;
    height:0px;
    background-color: black;
    position:fixed;
    top:7%;
    left:0;
    transition: height .5s ease, opacity 1s ease-out;
    opacity:0;
        z-index:9999;}

#bo - rozwijane menu mobilne. Proszę nie patrzeć na nazwy, jest to tylko czysto w formie testów.

komentarz 22 kwietnia 2017 przez Chess Szeryf (76,710 p.)

Czy możesz podać kod html?

komentarz 22 kwietnia 2017 przez MixTape Użytkownik (560 p.)

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">

    
    <title>ABC Montesorri</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="css/style.css" >
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script >
$(document).ready(function() {
$('#menu-1, #menu-2').click(function() {
$('#menu-1').toggleClass('open');
});
});
    
    $(document).ready(function() {
$('#menu-1').click(function() {
$('#bo').toggleClass('open');
});
});
    </script>
</head>

<body>
    <nav>
        <div class="container-fluid">
                <div id="menu-1">

                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    </div>
        </div>
    </nav>
    <div id="bo">
        <ul>
            <li><a href="index.html">TEST</a></li>
            <li><a href="index.html">TEST</a></li>
            <li><a href="index.html">TEST</a></li>
            <li><a href="index.html">TEST</a></li>
        </ul>
    </div>
      <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>  <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>  <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>  <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>  <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>  <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>  <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>About Me</h2>
                        <p>Appellat ipsum 
                            incididunt 
                            incididunt, non quae 
                            velit hic vidisse, 
                            quem o commodo, et 
                            labore tempor 
                            philosophari. Tempor 
                            e incurreret, 
                            officia multos 
                            incurreret. 
                            Expetendis si esse 
                            nescius. Et labore 
                            arbitrantur. Ita ea 
                            labore aliquip, an 
                            ipsum malis se 
                            mentitum. Quorum 
                            sempiternum ullamco 
                            ipsum appellat, qui 
                            quorum nostrud 
                            tractavissent est 
                            fore eiusmod a 
                            exquisitaque, enim 
                            ad ab veniam probant 
                            quo irure occaecat 
                            cernantur ita de 
                            quorum offendit 
                            iudicem, ubi amet 
                            coniunctione ad sed 
                            aut familiaritatem.</p>
                    </div>
                </div>
            </div>
        </section>
</body>

</html>

3 odpowiedzi

odpowiedź 22 kwietnia 2017 przez Kamil Naja Nałogowiec (27,410 p.)

odpowiedź 22 kwietnia 2017 przez xmentor Nałogowiec (49,520 p.)

Czy jest jakiekolwiek rozwiązanie na ten problem poza z-index?

Chyba nie, od tego właśnie z-index jest.

PS. styluj po klasach.

komentarz 22 kwietnia 2017 przez MixTape Użytkownik (560 p.)

Cześć, wiem, że po klasach, mówię jest to tylko poglądowo, dopiero doszlifowuje umiejętności, jednak chce się spiąć trochę i ruszyć z front-endem. Kiedyś za dzieciaka ogarniałem html, ale tyle się stało od tego czasu,że lecę ze wszystkim na nowo :D

Dzięki za odpowiedź i podpowiedź :)

odpowiedź 22 kwietnia 2017 przez MixTape Użytkownik (560 p.)

Jeszcze jedno pytanie, mając nadane z-index, kiedy menu jest zamknięnte, linki dalej mogą zostać kliknięte. Chodzi o to, że ono tak jakby nie znika. Jest tylko poziom krycia wyłączony. Jak poradzić sobie z tym problemem. Czy do transition dodać z-index, które się zmienia w zależności od tego czy menu jest włączone czy nie?

Pokaż 7 poprzednich komentarzy

komentarz 23 kwietnia 2017 przez pablop76 VIP (123,180 p.)
edycja 23 kwietnia 2017 przez pablop76

tak jak napisałem wcześniej nie wnikam w strukturę. height: 0; dla #bo nie zostanie zastąpione przez .open{height: 300px;} dodaj do css *{border 1px solid red;} i napisz czy tak sobie wyobrażasz swoje menu.

komentarz 23 kwietnia 2017 przez xmentor Nałogowiec (49,520 p.)

max-height można animować, ale wtedy musisz sprawdzić maksymalną wysokość elementu po rozwinięciu i ustawiać taką przy hoverze(trzeba też pamiętać o overflow: hidden dla elementu, który ma być rozwijany w taki sposób).