如何修復HTML元素並在用戶放大時強制滾動條？

Question

當我放大網頁時，我網站的DIV元素相互重疊。例如：如果放大StackOverflow，元素會保持不變，並放大到屏幕的中心/頂部。

我試過these的答案，但他們沒有說出我可以鎖定DIV的方式，範圍等要素，以他們的確切位置，而當我放大它們彼此重疊。

什麼變化，我應該讓我的CSS，傢伙？

Answer 1

有幾種方法可以構建DOM來防止重疊，但是如果元素相對或靜態定位並且不是很大，瀏覽器通常會很好地保持事物的平直。絕對位置是您真正進入重疊元素的位置。

例

DOM：

<div class='wrapper'> 
    <div class='box box-1'> 
    </div> 

    <div class="box box-2"> 
    </div> 
</div> 

CSS：

.wrapper { 
    position: relative; 
    width: 100%; 
} 
.box { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    top: 0; 
} 
.box-1{ 
    background-color: red; 
    left: 0 
} 
.box-2{ 
    right:0; 
    background-color: blue; 
} 

View On CodePen here.在這個例子中有定位在所述屏幕上，當空間用完的相對側的兩個盒子（由於縮放或調整大小）框重疊。爲了防止這種情況發生，您需要保持父元素（子元素所在的位置）不會摺疊。你可以在父元素上使用min-width來做到這一點。

請參閱updated code with a min-width on CodePen here，當縮放時，您將看到滾動條。