Блог

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

Верхнее поле дочернего контейнера уменьшает верхнее поле родительского контейнера

#html #css #parent-child #margin #positioning

#HTML #css #родитель-потомок #поле #позиционирование

Вопрос:

У меня есть фоновое изображение в родительском контейнере, которое занимает всю ширину экрана.

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

Независимо от того, как я пытаюсь установить верхнее поле дочернего контейнера, верхнее поле родительского контейнера перемещается вместе с дочерним, как будто два верхних края «склеены» вместе. Поле родительского контейнера следует за полем дочернего контейнера.

Как я могу заставить содержащийся элемент (.content) перемещаться вниз, сохраняя верхний край изображения фиксированным в верхней части страницы?

Спасибо!

Изображение BG следует за верхним полем поля

 /* Header */

.hero {
  background: url('../images/hero_laptop_2.jpg') no-repeat center center/cover;
  height: 75vh;
  position: relative;
  color: #fff;
}

.hero .content {
  border: solid black 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 40%;
  height: 60%;
  padding: 20px;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
}  
 <header class="hero">
  <div id="navbar" class="navbar top">
    <h1 class="logo">
      <span class="text-primary"><i class="fas fa-desktop"></i> IT</span>-Simplified</h1>
    <h1 id="navbar-phone">845-520-1115</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="#contact-form">Contact</a></li>
      </ul>
    </nav>
  </div>

  <div class="content">
    <h1>Welcome to IT-Simplified</h1>
    <p>We Provide COMPUTER SOLUTIONS... <br>Simply amp; Affordably.</p>
    <p id="call-us">Call Us: 845-520-1115</p>
    <!-- <a href="testimonials.html" class="btn"><i class="fas fa-chevron-right"></i> Testimonials</a> -->
  </div>
</header>

Ответ №1:

Вам нужно добавить абсолютную позицию или другое позиционирование в .класс hero .content, чтобы он отображался поверх фона независимо от родительского контейнера. Редактировать: в моем решении ниже я использовал position: relative; .

Z-индекс не имеет значения, поскольку позиционирование выводит его из обычного контекста потока html, поэтому я его удалил. Сделал несколько других изменений, посмотрите (используйте полный экран, в области небольшого фрагмента под полем содержимого отображается некорректно).

В качестве альтернативы вы можете попытаться сделать .контейнер hero display: flex; , чтобы вы могли размещать в нем его дочерние элементы, но это не кажется практичным здесь, где вы хотите, чтобы навигация была сверху, а содержимое внизу.

 /* Header */

.hero {
  background: url('https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball.jpg') no-repeat center center/cover;
  height: 100vh;
  color: #fff;
}

.hero .content {
  color: white;
  position: relative;
  border: solid yellow 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 40%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}  
 <header class="hero">
  <div id="navbar" class="navbar top">
    <h1 class="logo">
      <span class="text-primary"><i class="fas fa-desktop"></i> IT</span>-Simplified</h1>
    <h1 id="navbar-phone">845-520-1115</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="#contact-form">Contact</a></li>
      </ul>
    </nav>
  </div>

  <div class="content">
    <h1>Welcome to IT-Simplified</h1>
    <p>We Provide COMPUTER SOLUTIONS... <br>Simply amp; Affordably.</p>
    <p id="call-us">Call Us: 845-520-1115</p>
    <!-- <a href="testimonials.html" class="btn"><i class="fas fa-chevron-right"></i> Testimonials</a> -->
  </div>
</header>

Результат:

введите описание изображения здесь

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

1. Спасибо за предложения. Хотя я правильно расположил поле .content по вертикали, я не могу найти способ центрировать его по горизонтали. Если я расположу его абсолютно, поле, установленное на «авто», не работает … поле просто остается слева. Если я установлю абсолютные поля, то, конечно, все это не будет реагировать. Видите ли вы способ центрировать поле содержимого как по вертикали, так и по горизонтали, сохраняя при этом адаптивность? Спасибо!

2. Ах, извините за это, в конце я расположил его относительно, а не абсолютным. Абсолютное значение должно работать, если вы хотите сохранить его относительно одной из сторон с процентным значением в качестве поля. Но position: relative; здесь все работает нормально, и вы одновременно избавляетесь от z-индекса. Отредактировал сообщение, чтобы отобразить конечный результат, представленный полноэкранным средством просмотра фрагментов стека.

3. P.S. Не стесняйтесь редактировать изображение, номер телефона и название компании из сообщения, если это реальный клиент / компания.