关注我们

CSS - 定位(Position)

Position 可以将任何HTML元素放在您喜欢的任何位置，无涯教程将通过示例看到所有与CSS定位相关的属性-

Relative 定位

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

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

Move Left : 向左使用负值。
Move Right : 向右使用正值。
Move Up : 向上使用负值。
Move Down : 向下使用正值。

注意-您可以使用 bottom 或 right 值，也可以使用 top 和 left 。

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-positioning.html

来源：LearnFk无涯教程网

复制代码

<html>
   <head>
   </head>

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

它将产生以下输出-

Absolute 定位

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

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

注意-您可以使用 bottom 或 right 值，方法与顶部和左侧相同。

复制代码

<html>
   <head>
   </head>

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

Fixed 定位

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

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

注意-您可以使用 bottom 或 right 值，也可以使用 top 和 left 。

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-positioning.html

来源：LearnFk无涯教程网

复制代码

<html>
   <head>
   </head>

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

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

AI技术内参 -〔洪亮劼〕

Node.js开发实战 -〔杨浩〕

Service Mesh实战 -〔马若飞〕

Tony Bai · Go语言第一课 -〔Tony Bai〕

云时代的JVM原理与实战 -〔康杨〕

好记忆不如烂笔头。留下您的足迹吧 :)