#html #css #z-index
Вопрос:
Я создаю проект с большим изображением в верхней части страницы, за которым следует липкая навигация.
Информация, следующая за навигатором, продолжает нарушать границы!
Я пробовал всевозможные вещи, делая другие разделы после него более низкими или отрицательными номерами z-индекса, а также пытаясь установить непрозрачность на 99 для следующих модулей, потому что я прочитал, что непрозрачность изменяет порядок укладки.
/*Navigation*/ navigation { display: block; box-shadow: 0px 10px 22px #326559; } .z { position: relative; position: -webkit-sticky; position: sticky; top: 0px; z-index: 500; } nav { display: block; display: flex; flex-direction: row; justify-content: space-between; padding: 10px; align-items: center; } nav img { max-width: 9vw; } /*Annonce*/ .annonce { position: relative; z-index: -1; opacity: .99; } .annonce p { margin-top: 50px; margin-bottom: 50px; padding: 10px; } .annonce img { padding-bottom: 50px; } /*Location Gallery*/ hr { background-color: #326557; height: 3px; margin-bottom: 75px; } location-card { display: block; border: 2px solid #326557; margin-bottom: 50px; background-color: #e5fbe2; padding: 20px; position: relative; z-index: -1; } lt;navigation class="z"gt; lt;inner-columngt; lt;navgt; lt;a href="#" class="icon"gt; lt;img src="images/bla.png"gt; lt;/agt; lt;a href="#"gt;Sign inlt;/agt; lt;/navgt; lt;/inner-columngt; lt;/navigationgt; lt;maingt; lt;section class="annonce"gt; lt;inner-columngt; lt;pgt;Bla bla bla!lt;/pgt; lt;/inner-columngt; lt;picturegt; lt;img src="images/image1.jpg"gt; lt;/picturegt; lt;/sectiongt; lt;?php include('locationCards.php'); ?gt; Я собираюсь включить свой html-код для навигации. И немного о том, что будет после этого.
Я включаю некоторые CSS как для навигации, так и для того, что будет после, на случай, если другой более опытный человек сможет увидеть, в чем моя проблема.
Большое спасибо
Комментарии:
1. дайте фон для .z, чтобы вы не видели его насквозь 😉
2. Именно так:) Ваш липкий заголовок непрозрачен. Добавьте цвет фона.
3. У вашей навигационной системы нет фона, поэтому вы видите содержимое, прокручивающееся под липким элементом.
4. Боже мой, как легко все исправить. Большое вам всем спасибо. Все еще учусь, на что здесь обращать внимание.
Ответ №1:
Я уже создал подобный сайт, вы можете искать его в Google по ключевым словам. «Липкая навигационная панель».
и я тоже собираюсь поделиться с вами своим кодом.
window.onscroll = function () { myFunction() }; var header = document.getElementById("header"); function myFunction() { if (window.pageYOffset gt;= 30) { header.classList.add("sticky") } else { header.classList.remove("sticky"); } } body{ margin:0; } header{ position: fixed; width: 100%; padding: 5px 20px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; transition: 0.75s; } header .logo{ color: rgb(255, 255, 255); font-weight: 700; font-size: 30px; text-decoration: none; } header .nav{ position: relative; display: flex; } header .nav li{ list-style: none; margin-left: 50px; height:100%; } header .nav li a{ text-decoration: none; color: #fff; font-weight: 300; font-size: 20px; } header.sticky{ background: rgba(255,255,255,0.85); padding-top:0px; padding-bottom:0px; box-shadow: 0 5px 20px rgba(0,0,0,0,0.5); height:3.75rem; } header.sticky .logo{ color: rgb(0, 0, 0); } header.sticky ul{ height:100%; } header.sticky ul li{ height:100%; display:flex; align-items: center; } header.sticky ul li a{ color:rgb(204, 34, 34); } header.sticky .nav li:hover{ border-bottom: 5px solid #ff0157; } p{ font-weight: 300; color: #111; } .ban{ position: relative; width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg'); background-repeat: no-repeat; background-size:cover; background-position:left; } .ban .box{ max-width: 1000px; text-align: center; } .ban .box h3{ font-size: 5rem; color: #fff; } .ban .box p{ font-size: 1rem; color: #fff; } lt;header id="header"gt; lt;a href="#ban" class="logo"gt;Avengerlt;/agt; lt;ul class="nav"gt; lt;ligt;lt;a href="#ban"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a href="#about"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href="#menu"gt;Menult;/agt;lt;/ligt; lt;ligt;lt;a href="#expert"gt;Expertlt;/agt;lt;/ligt; lt;ligt;lt;a href="#contact"gt;contactlt;/agt;lt;/ligt; lt;/ulgt; lt;/headergt; lt;section class="ban" id="ban"gt; lt;div class="box"gt; lt;h3gt;Always Choose Goodlt;/h3gt; lt;pgt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim similique dolor saepe earum consequuntur.lt;/pgt; lt;a href="#menu" class="bnt"gt;Our Menult;/agt; lt;/divgt; lt;/sectiongt; Я думаю, что это поможет вам больше!