#html #css
Вопрос:
Итак, у меня есть эта проблема, у меня есть статическая веб-страница, раздел заголовка и несколько других. Но в настоящее время, прямо сейчас. Какой бы раздел я ни установил под разделом заголовка, он просто перемещается по заголовку.
Это происходит в первый раз, и я не могу перелюбить это. Сначала я рассмотрел его проблему в браузере, но она одинакова на всех, которые я пробовал.
Я думаю, что это проблема в разделе «Изображение в заголовке», поэтому я разместил его над разделом txt в заголовке, но раздел под заголовком все еще перекрывается в заголовке.
Поэтому я дважды проверил весь код в заголовке, и я думаю, что не было ничего плохого, что могло бы вызвать это.
header { margin: auto; height: 100vh; } .navigation-menu { z-index: 10000; display: flex; align-items: center; background: #fff; box-shadow: 0 1px 1px #333; justify-content: space-between; position: fixed; width: 100%; left: 0; top: 0; padding: 20px 20px; } .navigation-menu nav ul { word-spacing: 10px; } .navigation-menu nav ul li { list-style-type: none; display: inline-block; } .navigation-menu nav ul li a { font-size: 19px; } /* ===== Hamburger Menu ===== */ .navigation-menu .hamburger { padding: 5px; position: relative; display: none; cursor: pointer; right: 40px; border: none; background: none; outline: none; appearance: none; } .navigation-menu .hamburger .bar { transition: .3s ease all; position: relative; display: block; margin-bottom: 5px; width: 30px; height: 3px; background: #333; border-radius: 26px; } .hamburger.is-active .bar:nth-last-child(1) { transform: rotate(-45deg) translate(4px, -5px); } .hamburger.is-active .bar:nth-last-child(2) { transform: translateX(-10px); opacity: 0; } .hamburger.is-active .bar:nth-last-child(3) { transform: rotate(45deg) translate(6px, 8px); } .mobile-menu { transition: .3s ease all; transform: translateX(100%); position: fixed; display: none; align-items: center; justify-content: space-around; left: 0; top: 0; width: 100%; padding-top: 120px; height: 100vh; z-index: 2; background: #fff; } .mobile-menu.menu-show { transform: translateX(0%); } .mobile-menu ul { word-spacing: 10px; } .mobile-menu ul li { list-style-type: none; } .mobile-menu ul li a { font-family: 'Playfair Display', serif; margin-bottom: 5px; transition: .3s ease all; font-size: 45px; } .mobile-menu ul li a:hover { color: red; } @media (max-width:533px) { .navigation-menu nav { display: none; } .navigation-menu .hamburger { display: block; } .mobile-menu { display: flex; } } /* ===== Hamburger Menu ===== */ .heading__container { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 100vh; } .heading__content { position: relative; margin: 6%; display: block; } .heading__title h1{ font-weight: 900; text-transform: uppercase; font-size: 55px; } .heading__title h1 span { color: red; } .heading__subtitle p{ font-size: 22px; } .heading__subtitle { max-width: 600px; width: 100%; } .heading__image { padding: 1em; position: relative; text-align: center; } .heading__image img { max-width: 400px; width: 100%; } .heading__button-box .btn__read { background: red; border: solid 1px red; } .heading__button-box .btn__read a { color: #fff; } .heading__button-box .btn__react { position: relative; } .heading__button-box .btn__react::before { position: absolute; content: ''; left: 0; bottom: 0; background: red; z-index: -1; height: 0; transition: .3s ease all; width: 100%; } .heading__button-box .btn__react:hover::before { height: 100%; } .heading__button-box button { margin-bottom: 1%; margin-right: 5%; } .heading__button-box .btn__react a { transition: .3s ease all; } .heading__button-box .btn__react:hover { border: solid 1px red; } .heading__button-box .btn__react:hover a { color: #fff; } .heading__button-box .btn__react { border: solid 1px red; } .h__wrapper { margin-top: 50px; } .h__wrapper .h__button { display: inline-block; overflow: hidden; height: 60px; width: 60px; float: left; border-radius: 50px; cursor: pointer; margin: 10px 5px; transition: .3s ease all; box-shadow: 0 2px 12px #333; } .h__wrapper .h__button:hover { width: 200px; } .h__wrapper .h__button .icon { height: 60px; width: 60px; transition: .3s ease all; border-radius: 50px; text-align: center; line-height: 60px; box-sizing: border-box; display: inline-block; } .h__wrapper .h__button .icon i { font-size: 25px; line-height: 60px; } .h__wrapper .h__button span { font-size: 20px; line-height: 60px; margin-left: 10px; font-weight: 500; } .h__wrapper .h__button:nth-child(1) .icon { background: #fff; } .h__wrapper .h__button:nth-child(1):hover .icon { background: rgb(126, 168, 245); } .h__wrapper .h__button:nth-child(1):hover .icon i{ color: #fff; } .h__wrapper .h__button:nth-child(2) .icon { background: #fff; } .h__wrapper .h__button:nth-child(2):hover .icon { background: rgb(214, 146, 20); } .h__wrapper .h__button:nth-child(2):hover .icon i{ color: #fff; } .h__wrapper .h__button:nth-child(3) .icon { background: #fff; } .h__wrapper .h__button:nth-child(3):hover .icon { background: #333; } .h__wrapper .h__button:nth-child(3):hover .icon i{ color: #fff; } lt;headergt; lt;div class="navigation-menu"gt; lt;a href="#" class="logo"gt;lt;img src="../assets/images/logo/Anima.png" alt=""gt;lt;/agt; lt;navgt; lt;ulgt; lt;ligt;lt;a href="#" class="to-sides"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a href="#services" class="to-sides"gt;Serviceslt;/agt;lt;/ligt; lt;ligt;lt;a href="#about" class="to-sides"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href="#works" class="to-sides"gt;Workslt;/agt;lt;/ligt; lt;ligt;lt;a href="#projects" class="to-sides"gt;Projectslt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;div class="hamburger"gt; lt;span class="bar"gt;lt;/spangt; lt;span class="bar"gt;lt;/spangt; lt;span class="bar"gt;lt;/spangt; lt;/divgt; lt;/divgt; lt;nav class="mobile-menu"gt; lt;ulgt; lt;ligt;lt;a href="#"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a href="#about"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href="#services"gt;Serviceslt;/agt;lt;/ligt; lt;ligt;lt;a href="#works"gt;Workslt;/agt;lt;/ligt; lt;ligt;lt;a href="#projects"gt;Projectslt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;section class="heading__container"gt; lt;div class="heading__content"gt; lt;div class="heading__title"gt; lt;h1gt;lt;spangt;Emanuellt;/spangt; lt;brgt; Rajiclt;/h1gt; lt;/divgt; lt;div class="heading__subtitle"gt; lt;pgt;I am 16 years old Front-end developer and CS Studentlt;/pgt; lt;/divgt; lt;div class="heading__button-box"gt; lt;button class="btn__read"gt;lt;a href="#"gt;Read Morelt;/agt;lt;/buttongt; lt;button class="btn__contact btn__react"gt;lt;a href="#"gt;Get In Touchlt;/agt;lt;/buttongt; lt;/divgt; lt;div class="h__wrapper"gt; lt;div class="h__button"gt; lt;div class="icon"gt;lt;i class="fab fa-twitter"gt;lt;/igt;lt;/divgt; lt;spangt;lt;a href=""gt;Twitterlt;/agt;lt;/spangt; lt;/divgt; lt;div class="h__button"gt; lt;div class="icon"gt;lt;i class="fab fa-instagram"gt;lt;/igt;lt;/divgt; lt;spangt;lt;a href=""gt;Instagramlt;/agt;lt;/spangt; lt;/divgt; lt;div class="h__button"gt; lt;div class="icon"gt;lt;i class="fab fa-github"gt;lt;/igt;lt;/divgt; lt;spangt;lt;a href=""gt;Githublt;/agt;lt;/spangt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="heading__image"gt; lt;img src="../assets/images/header/valentin-salja-0aX51h4WvAk-unsplash.jpg"gt; lt;/divgt; lt;/sectiongt; lt;/headergt; Ответ №1:
Комбинация z-индекса:10000, которая даст этому элементу приоритет над всем (так что он все время будет сверху), и position:fixed, что позволит этому элементу занять фиксированное положение в указанном месте, независимо от того, какие прокрутки являются виновниками. Удаление этих двух свойств CSS устранит вашу «проблему».