Блог

Главная - Вопросы по программированию - почему содержимое веб-сайта отображается на панели навигации при прокрутке

почему содержимое веб-сайта отображается на панели навигации при прокрутке

#html #css

#HTML #css

Вопрос:

содержимое веб-сайта отображается на панели навигации при прокрутке, я не знаю, как это исправить flksjfjsdalf jjsdfjkldj fkjhdsjk fjkdhfjk lkfjs lkdjflksa fkjhdfjk fd f jksdfhjksh fakjhjkds hjkh jksdjklhjkf hs вот html:

 <body>
    <header>
        <p class="logo">גכשד יחכי</p>  
        <nav>
            <ul class="nav_links">
                <li><a href="#">אודות</a></li>
                <li><a href="#">שירותים</a></li>
                <li><a href="#">פרוייקטים</a></li>
            </ul>
        </nav>
        <a class="cta" href="https://support.microsoft.com/he-il/contactus/"><button>צור קשר</button></a>
    </header>
    <div class="intro"></div>
    <main>
        <h1 class="main-text">פסיכולוגית<br /> חינוכית</h1>
        <p class="secendery-text">חשדג גשחכי היא פסיכולוגית חינוכית<br /> העוסקת במקצוע זה למעלה מ20 שנה <br /></p>
        <img src="images/psychology1.png" alt="" class="side-image" />
    </main>
    <div class="card">
        <img src="images/img_avatar.png" alt="Avatar" >
        <div class="container">
            <h4><b>b</b></h4>
            <p> </p>
        </div>
    </div>
</body>
</html>

это css, который ссылается на проблему:

 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li, a, button {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    color: #edf0f1;
}


header {
    display: flex;
    background-color: #24252A;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    position: fixed;
    top: 0;
    width: 100%;
}



.nav_links {
    list-style: none;
    display: flex;
}
nav{
    order:2;
}

.cta{
    order:1;
}
.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
    color:#ddad34;
}




.main-text {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    padding: 0;
    position:absolute;
    top: 32%;
    right: 25%;
    direction: rtl;
    font-size: 60px;
    color: black;
}

.secendery-text {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 48%;
    right: 25%;
    direction: rtl;
    color: darkgray;
}

.side-image {
    position: absolute;
    top: 20%;
    left: 5%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

.

если кто-нибудь знает, как я могу это исправить
, пожалуйста, помогите
, спасибо

Комментарии:

1. Если эти странные слова вызваны подсказкой «кажется, вы публикуете в основном код», тогда обязательно воспользуйтесь этим советом и лучше опишите свой код, а не пишите случайно несколько слов

2. извините, я новичок в этом, и я не знаю, что описать подробнее

3. при прокрутке вниз панель навигации остается вверху, но содержимое веб-сайта (текст и картинки) отображается на панели навигации. я хочу, чтобы панель навигации отображалась поверх содержимого веб-сайта

Ответ №1:

В вашем случае вам следует добавить z-index свойство для элемента заголовка. По умолчанию, если элемент z-index не указан, он будет накладывать элементы в порядке объявления (последний html-элемент with position: absolute/fixed будет перекрывать предыдущие элементы with position: absolute/fixed ). Попробуйте указать свойство z-index для заголовка header { z-index: 100;} в файле css.

И в следующий раз попробуйте предоставить более конкретный обзор вашей проблемы вместо этой тарабарщины.