CSS - 定位

CSS可帮助您定位HTML元素.您可以将任何HTML元素放在您喜欢的任何位置.您可以指定是否希望元素相对于页面中的自然位置或基于其父元素的绝对位置.

现在,我们将看到所有与CSS定位相关的属性以及示例和减号;

相对定位

相对定位会更改HTML元素相对于正常显示位置的位置.所以"left:20"为元素的LEFT位置增加了20个像素.

你可以使用两个值 top left 以及 position 属性,用于将HTML元素移动到HTML文档中的任何位置.

  • Move Left - 左侧使用负值。

  • Move Right -左侧使用正值。

  • Move Up - 顶部使用负值。

  • Move Down - 使用正值为top。

注意 : 您也可以使用 bottom right 值,方法与 top left 相同.

以下是示例 :

<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

position:absolute的元素位于相对于屏幕左上角的指定坐标处。

您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。

  • Move Left - 左侧使用负值。

  • Move Right -左侧使用正值。

  • Move Up - 顶部使用负值。

  • Move Down - 使用正值为top。

注意:您也可以使用与左上角相同的方式使用底部或右侧值。

这是一个例子:

<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 - 左侧使用负值。

  • Move Right -左侧使用正值。

  • Move Up - 顶部使用负值。

  • Move Down - 使用正值为top。

注意:您也可以使用与左上角相同的方式使用底部或右侧值。

这是一个例子:

<html>
   <head>
   </head>

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