CSS - 定位

CSS 帮助您定位 HTML 元素。您可以将任何 HTML 元素放置在您喜欢的任何位置。您可以指定元素是相对于其在页面中的自然位置定位，还是基于其父元素进行绝对定位。

现在，我们将通过示例看到所有与 CSS 定位相关的属性 -

相对定位

相对定位更改 HTML 元素相对于其正常显示位置的位置。因此“left:20”向元素的 LEFT 位置添加 20 个像素。

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

向左移动 - 对left使用负值。
向右移动 - 对left使用正值。
上移 - 对top使用负值。
下移 - 对top使用正值。

注意- 您也可以使用底部或右侧值，方式与顶部和左侧相同。

这是例子 -

现场演示

<html>
   <head>
   </head>

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

它将产生以下结果 -

绝对定位

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

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

向左移动 - 对left使用负值。
向右移动 - 对left使用正值。
上移 - 对top使用负值。
下移 - 对top使用正值。

注意- 您也可以使用底部或右侧值，方式与顶部和左侧相同。

这是一个例子 -

现场演示

<html>
   <head>
   </head>

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

固定定位

固定定位允许您将元素的位置固定到页面上的特定位置，而不管滚动如何。指定的坐标将相对于浏览器窗口。

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

向左移动 - 对left使用负值。
向右移动 - 对left使用正值。
上移 - 对top使用负值。
下移 - 对top使用正值。

注意- 您也可以使用底部或右侧值，方式与顶部和左侧相同。

这是一个例子 -

现场演示

<html>
   <head>
   </head>

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