类及其标签的绝对/相对位置

Question

enter image description here

我有一个具有相对位置的类，并试图将其标记的位置设置为绝对。一旦我将位置设置为绝对位置，我网站中的所有内容都会消失。这里是 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;
    
        }

Answer 1

Parent(panel) 不能基于所有绝对定位的子元素具有合理的高度。在您的情况下，面板的高度将为 0，因为没有定位为绝对或固定的子元素。

不知道为什么要定位底部：5px，左侧：5px。

如果你只想要从底部到左边 5px 的空间，那么你可以使用填充。

.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>

希望对你有所帮助。