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?

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

Witam. Brak klamry zamykającej #menu-1.

Napisz co chcesz uzyskać. Po co #menu-1 i dlaczego position: relative; Dlaczego jedno menu to lista a inne to span.

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

Nadanie dla #bo overflow:hidden powinno załatwić sprawę.

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

Witam, klamra jest, tylko musiała się nie skopiować. #menu-1 jest to całe menu typu hamburger. W nim są zawarte element span, którymi struje css z dodatkową klasą open, w momencie gdy się na niego wciśnie.

Uzyskać chce to, aby po kliknięci na menu typu hamburger rozwijało mi listę z menu. Logiczne na telefonach.

Dodatkowo podczas testów zauważyłem, że trzeba przycisnąć idealnie w element span. To znaczy, tak jakby element div nie był wykrywany, że jest. Nie wiem czy zbyt jasno to opisałem.

Odnośnie "Dlaczego jedno menu to lista, a inne to span" to tak jak napisałem wyżej, jest to w zasadzie jedno menu.

Hmm relative jest tylko dlatego, żeby menu-rozwijane, czyli #bo było przyklejone zawsze do dołu #menu-1. Chyba, że coś źle rozumiem i robię, to chętnie usłyszę jakieś wskazówki :>

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

Witam. Nie będę się wypowiadał o strukturze menu. A co do błędów w tym co jest.

#menu-1 brak wysokości dlatego nie ma obszaru do kliknięcia.

Czy te spany to mają być belki w przycisku?. Brakuje ważnej części css więc się domyślam, że klasa .open posiada opacity: 1; opacity nie powoduje, że element jest "nieklikalny" jego tylko nie widać dla oka, ale cały czas jest w drzewie. Należało by użyć display: none; lub height: 0; i tymi wartościami manipulować w jquery lub przy innej strukturze działal by :hover(zabezpieczenie przed wyłączeniem js) Problem jeszcze jest taki, że id ma opacity:0; a klasa .open opacity:1; Id jest silniejszeod klasy i dlatego nie działa mechanizm. Szerokość 100% dla submenu chyba zbędna.

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

Tak klasa .open posiada opacity 1, jednak jeżeli na zamkniętym menu dodam display:none; nie posiada to animacji, znaczy nie zamyka się płynnie, tylko znika od razu po kliknięciu na menu, nawet transition display nie pomaga. Z zamkniętego menu usunąłem właściwość z-index i pomogło jak na razie, widzę to za jedyne sensowne rozwiązanie.

"Szerokość dla submenu 100% zbędna" dlaczego? Właśnie chce, żeby na telefonie rozwijało się na cały ekran, domyślnie będzie ono jednak w jakimś stopniu przeźroczyste, żeby nie zasłaniało całkowicie treści.

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

Dlatego napisałem o height: 0; Można manipulować płynnie wysokością Display nie da się animować.

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

Jest dodane height 0,jednak to też nie zalatwialo sprawy. Dopóki nie było tego dodanego, nie chciało też tego animowac.

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).