用js，css，html設置DIV中元素的座標

Question

我正在處理一些日記問題的圖形表示。我需要的是在其他DIV中使用簡單的DIV（或其他）來顯示文本塊，就像在問題頁面上組織它們的方式一樣。爲此，我需要將DIV元素的座標設置爲精確數字，但是與父DIV相關。有沒有辦法通過使用CSS或JS做到這一點？

Answer 1

如果您將外部div設置爲position: relative，則可以將內部div設置爲position: absolute並將其頂部，左側，右側和底部屬性設置爲所需的像素。例如。

.outer { 
 
     position: relative; 
 
    } 
 

 
    .inner { 
 
     position: absolute; 
 
     top: 10px; //your coordinate 
 
     left: 5px; //your coordinate 
 
    }

<div class="outer"> 
 
     <div class="inner">Your content</div> 
 
</div> 
 

 

否則，你可以簡單地使用填充內部元件上。

Answer 2

如果您希望div爲display: block;，您可以使用簡單的margin-top和margin-left來設置座標。

比方說，（例如），你需要設置的div作爲< 100,50>座標：

要做到這一點，在CSS中，設置margin-left: 100px和margin-top: 50px