CSS可帮助您放置HTML元素。您可以将任何HTML元素放在您喜欢的任何位置。您可以根据元素的父元素来指定元素相对于页面中自然位置的位置还是相对位置。

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

相对定位

相对位置会更改HTML元素相对于其通常显示位置的位置。因此，“ left：20”会将20像素添加到元素的LEFT位置。

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

• 向左移动-使用一个负值向左移动。
• 向右移动-向左使用正值。
• 上移-对top使用负值。
• 向下移动-对顶部使用正值。

注意–您可以使用top或left的相同方式使用bottom或right值。

这是示例-

         This div has relative positioning.
      
   

它将产生以下结果-

绝对定位

位置为：绝对的元素位于相对于屏幕左上角的指定坐标处。

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

• 左移-使用负值的离开了。
• 向右移动-向左使用正值。
• 上移-对top使用负值。
• 向下移动-对顶部使用正值。

注意-您可以使用上下或右下的值。

这是一个例子-

         This div has absolute positioning.
      
   
 

固定位置

固定位置使您可以将元素的位置固定到页面上的特定位置，而无需滚动。指定的坐标将相对于浏览器窗口。

您可以使用两个值顶部，与位置属性左边是移动HTML文档中的HTML元素的任何地方。

• 左移-使用负值的离开了。
• 向右移动-向左使用正值。
• 上移-对top使用负值。
• 下移-将正值用作顶部。

注意–您可以使用top或left的相同方式使用bottom或right值。

这是一个例子-

         This div has fixed positioning.