Блог

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

Исправление верхней панели навигации, когда ее положение установлено как относительное

#html #css

#HTML #css

Вопрос:

Как мне сделать эту верхнюю панель навигации фиксированной сверху?

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

 .boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 90px;
  position: relative;
  border-bottom: 1px solid #E0DCDC;
}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}


.box1 {
  float: left;
   width: auto;
}

.box2 {
  float: right;
  width: auto; 
}



.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px 50px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
  font-family: 'Gotham';
  letter-spacing: 2.5px;
}


.box1 img {
  position: absolute;
  height: 20px;

}  
 <div class="boxA">


  <div class="box1">
    <div class="site">
      <a href=""><img src="https://via.placeholder.com/140x100"></a>
    </div> 
  </div>

  <div class="box2">
    <nav class="menu"> 
      <ul>
          <li><a href="#conD">menu1</a></li>
          <li><a href="#conG">menu2</a></li>
          <li><a href="#conH">menu3</a></li>
          <li><a href="#conI">menu4</a></li>    
      </ul>
    </nav>
  </div>

</div>

Я попытался добавить div class="top-nav" прямо выше div class="boxA" и назначить позицию .top nav как фиксированную, но это не сработало.

Ответ №1:

Добавьте высоту вашего тела для лучшего понимания. Добавьте фиксированную позицию и верхнюю 0 и ширину 100% к вашему классу BoxA

 body {
  height: 900px;
}
.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 90px;
  position: fixed;
  border-bottom: 1px solid #E0DCDC;
  top: 0;
  width: 100%;
  background: #fff;
    -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
    box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
}

.body_part {
  margin-top: 100px;
}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}


.box1 {
  float: left;
   width: auto;
}

.box2 {
  float: right;
  width: auto; 
}



.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px 50px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
  font-family: 'Gotham';
  letter-spacing: 2.5px;
}


.box1 img {
  position: absolute;
  height: 20px;

}  
 <body>
  <div class="boxA">


    <div class="box1">
      <div class="site">
        <a href=""><img src="https://via.placeholder.com/140x100"></a>
      </div> 
    </div>

    <div class="box2">
      <nav class="menu"> 
        <ul>
            <li><a href="#conD">menu1</a></li>
            <li><a href="#conG">menu2</a></li>
            <li><a href="#conH">menu3</a></li>
            <li><a href="#conI">menu4</a></li>    
        </ul>
      </nav>
    </div>

  </div>
  
  <div class="body_part">
    <img src = "https://via.placeholder.com/350x150">
  </div>
</body>

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

1. Спасибо, это сработало! Прокручивая вниз, я замечаю, что, хотя верхняя панель навигации правильно закреплена сверху, иногда она размещается ПОД определенными элементами — как мне это исправить?

2. проверьте мой отредактированный ответ, попробуйте добавить background и box-shadow, это может вам помочь

3. Спасибо. Я пробовал, но верхняя панель навигации по-прежнему отображается под определенными элементами! Что может быть причиной этого?

4. вам нужно создать класс с именем body_part, и в body_part будут включены все остальные элементы

5. Привет, спасибо. Я завернул все остальное в div=body_part, но у меня все еще есть проблема…. что еще я мог бы попробовать здесь? большое спасибо