極客書

CSS - Positioning

CSS幫助您定位HTML元素。你可以把任何HTML元素放在任何你喜歡的位置。可以指定是希望元素相對於其在頁面中的自然位置定位，還是基於其父元素絕對定位。

現在，我們將看到所有與CSS定位相關的屬性和示例;

Relative Positioning

相對位置更改HTML元素相對於其正常顯示位置的位置。所以「left:20」將元素的左側位置增加20個像素。

您可以使用兩個值top和left以及position屬性將HTML元素移動到HTML文檔中的任何位置。

  • Move Left - Use a negative value for left.
  • Move Right - Use a positive value for left.
  • Move Up - Use a negative value for top.
  • Move Down - Use a positive value for top.

注意−您可以使用底部或右側值，方法與頂部和左側相同。

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

它將產生以下結果&負;

Absolute Positioning

位置爲「絕對」的元素位於相對於螢幕左上角的指定坐標處。

您可以使用兩個值top和left以及position屬性將HTML元素移動到HTML文檔中的任何位置。

  • Move Left - Use a negative value for left.
  • Move Right - Use a positive value for left.
  • Move Up - Use a negative value for top.
  • Move Down - Use a positive value for top.

注意−您可以使用bottom或right值，方法與top和left相同。

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

Fixed Positioning

固定位置允許您將元素的位置固定到頁面上的特定位置，而不必考慮滾動。指定的坐標將相對於瀏覽器窗口。

您可以使用兩個值top和left以及position屬性將HTML元素移動到HTML文檔中的任何位置。

  • Move Left - Use a negative value for left.
  • Move Right - Use a positive value for left.
  • Move Up - Use a negative value for top.
  • Move Down - Use a positive value for top.

注意−您可以使用底部或右側值，方法與頂部和左側相同。

下面是一個例子;