CSS ::定位

2023-07-03 16:21:04 435

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

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

相对定位

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

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

向左移动–为left使用负值。

向右移动–为left使用一个正值。

上移-对top使用负值。

下移–对top使用正值。

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

这是示例：


   
   

   
      
         This div has relative positioning.

它将产生以下结果-

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

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

向左移动–为left使用负值。

向右移动–为left使用一个正值。

上移-对top使用负值。

下移–对top使用正值。

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

这是一个例子：


   
   

   
      
         This div has absolute positioning.

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

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

向左移动–为left使用负值。

向右移动–为left使用一个正值。

上移-对top使用负值。

下移–对top使用正值。

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

这是一个例子：


   
   

   
      
         This div has fixed positioning.