CSS - 定位(Position)

CSS - 定位(Position) 首页 / CSS入门教程 / 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 。

<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文档中的任何位置。

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

注意-您可以使用 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文档中的任何位置。

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

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

<html>
   <head>
   </head>

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

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

技术教程推荐

硅谷产品实战36讲 -〔曲晓音〕

深入拆解Tomcat & Jetty -〔李号双〕

RPC实战与核心原理 -〔何小锋〕

分布式系统案例课 -〔杨波〕

手机摄影 -〔@随你们去〕

去无方向的信 -〔小麥〕

云计算的必修小课 -〔吕蕴偲〕

结构学习力 -〔李忠秋〕

程序员职业规划手册 -〔雪梅〕

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