html - 标签脱离了它的

Question

调整 <p> 大小时标签脱离其父标签 <div> , 我怎样才能让它响应并留在 <div>我用 HTML 和 CSS 实现的 HTML 代码:

<div class="text3">
  <div class="firstext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
    </p>
  </div>
  <div class="secondtext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
    </p> 
  </div>
  <img class="logo" src="/images/logo.png" alt="">
</div>

这是CSS代码:

.text3 {
  display: grid;
  grid-template-rows: 50% 50%;
}
.firstext {
    position: relative;
    width: 50%;
}
.firstext p {
    position: absolute;
    left: 35%;
    top: 20%;
    width: 50vh;
    height: auto;
}
.secondtext {
    position: relative;
    width: 50%;
}
.secondtext p {
    position: absolute;
    left: 35%;
    top: 20%;
}

Answer 1

问题是绝对的

在 position: relative 中，元素相对于自身定位。但是，绝对定位元素是相对于其父元素的。

具有position: absolute 的元素从正常文档流中移除。它会自动定位到其父元素的起点(左上角)。如果它没有任何父元素，那么初始文档将是它的父元素。

由于 position: absolute 将元素从文档流中移除，因此其他元素会受到影响并表现为该元素已从网页中完全移除。

查看更多信息 How to use the position property in CSS to align elements