Панель навигации - прозрачный вопрос - PullRequest
0 голосов
/ 26 апреля 2018

enter image description here

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

Вот HTML и CSS, когда я тестирую это в онлайн-редакторе, он работает правильно. Но в моем местном коде это не так.

    nav{
    position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
      border: 1px solid rgba(0,0,0,.1);
    }
      nav ul{
        list-style: none;
        position: relative;
        float: right;
        margin-right: 100px;
        display: inline-table;
      }
        nav ul li{
          float: left;
          -webkit-transition: all .2s ease-in-out;
          -moz-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
        }

    nav ul li:hover{background: rgba(0,0,0,.15);}
    nav ul li:hover > ul{display: block;}
    nav ul li{
      float: left;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
      nav ul li a{
        display: block; 
        padding: 30px 20px;
        color: #222; 
        font-size: .9em;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;
}
<nav role="navigation"> 

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

</nav>

1 Ответ

0 голосов
/ 26 апреля 2018

Я не могу комментировать, так что это выглядит как ответ, но это скорее предложение, так как я не вижу весь ваш код (например, откуда исходит Lorem Ipsum?)

Вы установили nav в положение : исправлено , это удаляет себя из структуры DOM. Я не вижу там свойства z-index, чтобы можно было исправить ситуацию. Текст будет скрыт за навигацией, если вы установите z-index на значение больше 0.

nav {
  position:fixed;
  z-index: 1;
...
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...