Фиксированная верхняя навигация не перекрывает содержимое страницы - PullRequest
Новая
       27

Фиксированная верхняя навигация не перекрывает содержимое страницы

0 голосов
/ 14 января 2019

Я пытаюсь создать навигацию с фиксированным верхом, которая должна быть всегда видимой и наложить контент при необходимости. Однако после нескольких попыток я получил следующий результат. Я бы хотел избавиться от этого эффекта "прозрачности" на панели навигации. 

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,800|Poppins");
.nav-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

#mobile-nav {
  height: 3.8rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0px 1px 10px black;
}
#mobile-nav i {
  font-size: 3rem;
}

#content {
  margin-top: 4rem;
}

#start {
  height: 50vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#start h1 {
  position: relative;
  top: 25%;
  font-size: 2.3rem;
  margin: 0 1rem;
}

#info {
  height: 100vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  text-align: c;
}
#info p {
  margin: 0 50px;
}
#info h2 {
  text-align: center;
}

.fixed-top {
  position: fixed;
  top: 0;
}
<header>
  <nav id="mobile-nav" class="fixed-top">
    <div class="nav-title">Some logo</div>
    <i class="material-icons">menu</i>
  </nav>
</header>

<div id="content">
  <section id="start">
    <h1>This is an<br />awesome header.</h1>
  </section>
  <section id="info">
    <h2>And this is another header.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nibh vel eros porttitor semper. Sed sit amet porttitor velit, sed malesuada orci. Nam nec gravida quam. Proin eget tristique quam. Nam posuere massa magna. Aenean congue
      sed enim id tempus. Etiam sed est in arcu facilisis auctor sit amet nec eros. Duis cursus molestie quam, quis blandit ex eleifend vitae. Quisque efficitur leo at magna ornare, vitae aliquam ante interdum. Nullam eget consectetur arcu. Suspendisse
      sit amet tincidunt dui, sit amet placerat nunc. Sed posuere, lacus quis pellentesque interdum, dui nulla molestie est, vel condimentum enim quam in ex.</p>

До сих пор я пробовал z-index и добавлял margin-top к содержимому div, но это не помогло. Что я делаю не так и как я могу это исправить? Есть ли какие-то специфические особенности в фиксированной позиции?

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Я добавил цвет фона для вашей навигации и установил z-index выше, чем ваш контент и заголовки. 

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,800|Poppins");
.nav-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

#mobile-nav {
  height: 3.8rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0px 1px 10px black;
  background-color:#ffffff;
}
#mobile-nav i {
  font-size: 3rem;
}

#content {
  margin-top: 4rem;
}

#start {
  height: 50vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#start h1 {
  position: relative;
  top: 25%;
  font-size: 2.3rem;
  margin: 0 1rem;
  z-index:90;
}

#info {
  height: 100vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  text-align: c;
}
#info p {
  margin: 0 50px;
}
#info h2 {
  text-align: center;
}

.fixed-top {
  position: fixed;
  z-index:100;
  top: 0;
}
<header>
  <nav id="mobile-nav" class="fixed-top">
    <div class="nav-title">Some logo</div>
    <i class="material-icons">menu</i>
  </nav>
</header>

<div id="content">
  <section id="start">
    <h1>This is an<br />awesome header.</h1>
  </section>
  <section id="info">
    <h2>And this is another header.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nibh vel eros porttitor semper. Sed sit amet porttitor velit, sed malesuada orci. Nam nec gravida quam. Proin eget tristique quam. Nam posuere massa magna. Aenean congue
      sed enim id tempus. Etiam sed est in arcu facilisis auctor sit amet nec eros. Duis cursus molestie quam, quis blandit ex eleifend vitae. Quisque efficitur leo at magna ornare, vitae aliquam ante interdum. Nullam eget consectetur arcu. Suspendisse
      sit amet tincidunt dui, sit amet placerat nunc. Sed posuere, lacus quis pellentesque interdum, dui nulla molestie est, vel condimentum enim quam in ex.</p>
0 голосов
/ 14 января 2019

Я думаю, что background-color свойство - это то, что вы ищете.

Вы можете попробовать добавить следующие строки в #mobile-nav: 

  background-color: white;
  z-index: 100; // or any other huge value
0 голосов
/ 14 января 2019

Вам нужно дать ему background-color, если вы хотите, чтобы он был непрозрачным. Кроме того, потому что это до остального контента, когда они перекрываются, остальное будет выше. Чтобы поднять это выше, дайте это z-index: 1; 

.fixed-top {
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 1
}

Еще один способ сделать это - переместить полосу прокрутки с body на #content, что больше не позволит им перекрываться (в этом случае вам больше не нужно вышеуказанное). Он также имеет то преимущество, что полоса прокрутки не отображается в верхней части меню: 

#content {
  margin-top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

Наконец, вы должны предотвратить превышение шириной верхней полосы документа, сказав, чтобы она включала padding в общее вычисление width: 

#mobile-nav {
  box-sizing: border-box;
}

Смотрите здесь: https://codepen.io/andrei-gheorghiu/pen/KbbmmG

...