避免與響應中的絕對位置重疊

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查詢這種佈局。