Почему мои подписи не работают должным образом, когда я пытаюсь сжать 2 набора правил CSS в один?

Question

Итак, я только начинаю делать свою первую веб-страницу с HTML, CSS и JS, и я хочу черный полупрозрачный квадрат поверх изображения с текстом внутри.

В CSS яУ меня есть набор правил, с которыми у меня возникают проблемы: ".caption".Этот класс является классом div, и вы увидите, что закомментировано 2 набора правил.

Дело в том, что когда я раскомментирую их и комментирую ".caption", страница работает отлично.Но когда прокомментировал путь ниже, он не работает вообще, текст появляется под изображением, без форматирования.

Я знаю, что мне не нужно его менять, но я хочу, чтобы нацелитьсяоба текстовых элемента одновременно, и для серого прямоугольника вокруг них должен быть квадрат, а не 5-сторонняя форма (ссылки ниже для изображений) и более чистый код.Есть ли способ?Текст в своем классе и div, верно?

Это код:

.teamworkImage {
    width: 100%;
    height: 600px;
}


/*.caption h1 {
    position: absolute;
    bottom: 500px;
    font-family: 'Segoe UI';
    color: rgb(255, 255, 255);
    font-size: 60px;
    background-color: rgba(0,0,0,0.7);

}

.caption p {
    position: absolute;
    bottom: 360px;
    font-family: 'Segoe UI';
    color: rgb(255, 255, 255);
    font-size: 20px;
    width: 200px;
    background-color: rgba(0,0,0,0.7);
    padding: 10px;*/
}

.caption {
    position: absolute;
    bottom: 500px;
    font-family: 'Segoe UI';
    color: rgb(255, 255, 255);
    font-size: 40px;
    background-color: rgba(0,0,0,0.7);
}

<div id = 'main'>    
    <div class = 'image'>    
        <img src = 'img/teamwork.jpg'
         class = 'teamworkImage'>    
        <div class = 'caption'>
            <h1>THIS IS TEAMWORK</h1>
            <p>
                Our team-building activites help you form new friends, face fears, and - most important of all - have fun.
            </p>
        </div>   
    </div>    
</div>

С кодом CSS ниже

с закомментированными частями CSS без комментариев иПрокомментированный набор правил «.caption»

Демонстрационная скрипка

Answer 1

Обратите внимание на закрывающую фигурную скобку для .caption p, оставленную вне комментария.Это нарушает CSS на этом этапе, поэтому .caption никогда не оценивается и не применяется.

Я добавил изображение-заполнитель в фрагменте ниже и центрировал caption на изображении, с обновленным комментарием только для примера..

Кроме того, вы должны обязательно установить position: relative для элемента, к которому относятся абсолютные элементы, в противном случае он может оказаться относительно тела.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image {
    position: relative;
}
.teamworkImage {
    width: 100%;
    height: 600px;
}


/*.caption h1 {
    position: absolute;
    bottom: 500px;
    font-family: 'Segoe UI';
    color: rgb(255, 255, 255);
    font-size: 60px;
    background-color: rgba(0,0,0,0.7);

}

.caption p {
    position: absolute;
    bottom: 360px;
    font-family: 'Segoe UI';
    color: rgb(255, 255, 255);
    font-size: 20px;
    width: 200px;
    background-color: rgba(0,0,0,0.7);
    padding: 10px; BEFORE THE CLOSE COMMENT WAS HERE!!!
}*/

.caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Segoe UI';
    color: rgb(255, 255, 255);
    font-size: 40px;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
}

<div id = 'main'>    
    <div class='image'>    
        <img src = 'https://via.placeholder.com/600/ccee00/ffffff'
         class = 'teamworkImage'>    
        <div class='caption'>
            <h1>THIS IS TEAMWORK</h1>
            <p>
                Our team-building activites help you form new friends, face fears, and - most important of all - have fun.
            </p>
        </div>   
    </div>    
</div>

Answer 2

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

.image {
  position: relative; /* <-- set an ancestor as the container */
}
.image > img {
  width: 100%;
}
.caption h1 {
  font-family: 'Segoe UI';
  color: rgb(255, 255, 255);
  font-size: 60px;
}

.caption p {
  font-family: 'Segoe UI';
  color: rgb(255, 255, 255);
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

.caption {
  position: absolute; /* <-- just this box is absolutely-positioned */
  bottom: 50px;
  font-family: 'Segoe UI';
  color: rgb(255, 255, 255);
  font-size: 40px;
  background-color: rgba(0, 0, 0, 0.7);
}

<div id='main'>
  <div class='image'>
    <img src='http://placehold.it/800x500' class='teamworkImage'>
    <div class='caption'>
      <h1>THIS IS TEAMWORK</h1>
      <p>
        Our team-building activites help you form new friends, face fears, and - most important of all - have fun.
      </p>
    </div>
  </div>
</div>