避免与响应中的绝对位置重叠

Question

我正在尝试创建一个带有一些基本文本元素的div。我的要求是div内的元素应该根据div对齐，因此我将绝对定位与我的主div定位为相对值，并将百分比值赋予它，以便它们可以在响应式屏幕中工作。我甚至在媒体屏幕中改变了一些最低的百分比。但是，在某些情况下，当屏幕大小发生变化时，一个文本或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查询这种布局。