html - 避免在响应式中与绝对定位重叠

Question

我正在尝试创建一个包含一些基本文本元素的 div。我的要求是 div 内的元素应该根据 div 对齐，因此我使用绝对定位，我的主 div 定位为相对定位，并为其提供百分比值，以便它们可以在响应式屏幕中工作。我什至更改了媒体屏幕中的一些顶部底部百分比。但是，在某些情况下，当屏幕尺寸发生变化时，一个文本 block 或 div 会与另一个重叠。有没有办法避免响应屏幕中的这种重叠。提前谢谢你:)

.Heading{
  position:relative;
 }
.Heading h3{
  top:1%;
  position:absolute;
  left:0;
  right:0;
}
.Text{
    Position: absolute;
    top: 10%;
 }
.bottom-part{
  position:absolute;
  top:60%; 
}

<div class="main">
  <div class="Heading">
    <h3>Heading part</h3>
  </div>
  <div class="Text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="bottom-part">
    <h4>Here's the ending part</h4>
  </div>
</div>

Answer 1

好吧，我可以给你一个解决方案，通过像这样设置 min-height 来轻松修复它:

.Heading {
  position: relative;
  min-height: 100px;
}
.Heading h3 {
  top: 1%;
  position: absolute;
  left: 0;
  right: 0;
}
.Text {
  Position: absolute;
  top: 10%;
}
.bottom-part {
  position: absolute;
  top: 60%;
}

<div class="main">
  <div class="Heading">
    <h3>Heading part</h3>
  </div>
  <div class="Text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="bottom-part">
    <h4>Here's the ending part</h4>
  </div>
</div>

但是你所做的完全不对。在这种情况下，你不应该使用 position: absolute。相反，您需要对这种布局使用 @media 查询。