Изображение начальной загрузки застряло в верхней части экрана

Question

Для класса я должен создать веб-сайт с изображением прямо под панелью навигации, но по какой-то причине, которое я не могу понять, изображение отображается внутри панели навигации, а не под ней. Может кто-нибудь объяснить, почему это происходит и как это исправить? Спасибо

<div class="row">
 <nav class="navbar-fixed-top">
   <div class="container-fluid">
    <div class="navbar-header">
    <ul class="nav navbar-nav" id="mainNav">
        <li><a href="###">Locations</a></li>
        <li><a href="###">Special Events</a></li>
        <li><a href="###">Breakfast</a></li>
        <li><a href="###">Lunch</a></li>
        <li><a href="###" class="active">Liam's Food Fusion</a></li>
        <li><a href="###">Dinner</a></li>
        <li><a href="###">Apps and Extras</a></li>
        <li><a href="###">Online Ordering</a></li>
        <li><a href="###">Contact Us</a></li>

    </ul>
  </div>
    </div>
</nav>
  </div>
 <!--    end navigation  -->
 <div class="row">
  <div class="container-fluid">
   <div class="col-md-4" id="logopic">
    <img src="images/food fusion logo.png" />
</div>
</div>
</div>

Answer 1

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, который думает, что трехмерный элемент размещает выше (думайте 3D) все на странице. Итак, что происходит с изображением, так это то, что оно находится в верхней части страницы с навигационной панелью сверху.

Так что вы можете просто удалить класс .navbar-fixed-top из элемента nav или добавить верхнюю границу в div, окружающий контент, следующий за панелью навигации (в данном случае <div class="row">.

Вот Codepen с примером.

Answer 2

Я думаю, вам нужно установить свой класс в элементе nav следующим образом:

<nav class="navbar navbar-default navbar-fixed-top">

и добавьте следующий CSS

body { padding-top: 70px; }

(по документам: https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top)

См. Демо ниже:

.body {
  padding-top: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav" id="mainNav">
      <li><a href="###">Locations</a></li>
      <li><a href="###">Special Events</a></li>
      <li><a href="###">Breakfast</a></li>
      <li><a href="###">Lunch</a></li>
      <li><a href="###" class="active">Liam's Food Fusion</a></li>
      <li><a href="###">Dinner</a></li>
      <li><a href="###">Apps and Extras</a></li>
      <li><a href="###">Online Ordering</a></li>
      <li><a href="###">Contact Us</a></li>
    </ul>
  </div>
</nav>
<!--    end navigation  -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
  </div>
</div>

Answer 3

Поскольку navbar использует класс navbar-fixed-top, он является фиксированным и, следовательно, не влияет на размещение других элементов. Что вы должны сделать, это добавить поле в верхней части изображения или один из его контейнеров. Кроме того, я вполне уверен, что вам не нужна внешняя панель навигации, возможно, что-то напутало.

Answer 4

CSS

navbar-fixed-top использует абсолютное позиционирование, чтобы разместить его на вершине всего остального. Использование абсолютного позиционирования в css не толкает другие контейнеры под ним, оно просто позиционирует себя над ними.

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

Глядя на проверку этого примера начальной загрузки может помочь вам понять https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/. Обратите внимание, что тег body в примере Fixed Top имеет верхний отступ. В примере Static Top body не имеет отступа, потому что панель навигации размещается с использованием относительного позиционирования вместо абсолютного позиционирования.