讓div無法繼續移動瀏覽器屏幕

Question

當我調整瀏覽器窗口的大小時，我的div元素移動到左側，但我希望它們留在一個位置，當我這樣做時。如何在調整瀏覽器窗口大小的同時讓div元素保留在一個位置？

<div style="background:red; width:30px; height:30px"> 

</div> 

Answer 1

<div style="background:red; width:30px; height:30px position: absolute; 
      top:/* pixels from top of screen*/ 30px; 
      left:/* pixels from left side of screen*/100px;"> 

</div> 

Answer 2

你有幾個選項來實現，但是你想什麼哪一個你會使用取決於你的代碼的其餘部分。

您可以絕對定位容器，但在這種情況下，它非常重要，包含這些div的父元素也具有定義在其上的非靜態定位。最流行的方法之一是定義父元素的相對位置，然後絕對定位內元素。

這裏是一個例子。

HTML

<div class="wrapper"> 
    <div class="div_1"> 
     <!-- DIV 1 content --> 
    </div> 
    <div class="div_2"> 
     <!-- DIV 2 content --> 
    </div> 
</div> 

CSS

.wrapper { 
    position:relative; 
} 

.div_1 { 
    position:absolute; 
    top:10px; 
    left:20px; 
} 
.div_2 { 
    position:absolute; 
    bottom:10px; 
    left:20px; 
} 

Answer 3

使用垂直對齊，填充，位置PROPERT屬性.. 對於位置屬性是指以下鏈接 enter link description here 對於Padding屬性參考以下鏈接enter link description here 對於垂直對齊屬性是指以下鏈接enter link description here

<div style="background:red; width:30px; height:30px;vertical-align:top;padding:0px 0px 0px 0px"> 
</div>