Блог

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

У меня есть класс с относительной позицией, и я пытаюсь установить положение его тега в абсолютное. Как только я установлю абсолютную позицию, все на моем сайте исчезнет.вот CSS

    .container {
    display: flex;
    width: 90vh;   */I didnt have this line in my code first
    }

     .panel {
        position:relative;
        }
        .panel h3{
        position:absoloute;
        bottom: 5px;
        left: 5px;
    
        }
 

Родительский элемент (панель) не может иметь разумной высоты на основе дочерних элементов, которые все расположены в абсолютном положении. В вашем случае высота панели будет равна 0, потому что нет дочерних элементов, которые не позиционируются ни как абсолютные, ни как фиксированные.

Не уверен, почему вы пытаетесь расположить снизу: 5 пикселей, слева: 5 пикселей.

Если вам нужно просто 5 пикселей снизу слева, вы можете использовать отступы.

 .panel {
  padding-bottom: 5px;
  padding-left: 5px;
} 

В противном случае, если вам нужен позиционированный макет, то parent(.panel) должен иметь разумную высоту вручную с помощью css.

  .panel {
    position:relative;
    height: 50px;
    /* if not set width manually, default is 100% */
 }
 .panel h3{
    position: absolute;
    bottom: 5px;
    left: 5px;
 } 

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

 .panel {
      position: relative;
    }

    .panel img {
      /* if you will need to adjust width and height, you can enter here */
      /* width: 100%;*/
      /* height: 200px;*/
      /* object-fit: cover*/
    }

    .panel h3 {
      position: absolute;
      left: 5px;
      bottom: 5px;
    } 

 <div class="container">
  <div class="panel active">
    <img src="https://i.stack.imgur.com/wSCfr.png"/>
    <h3>This is image 1</h3>
  </div>
</div> 

Надеюсь, это поможет вам.