CSS定位(Position)

赚钱认知觉醒课|只教大学不教的创富思维

与读书有关的那些问题

接地气PM杰克

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

Relative 定位

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

注意-您可以使用 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 。

复制代码

<html>
   <head>
   </head>

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

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

教程推荐

结构沟通力 -〔李忠秋〕

手把手带你搭建推荐系统 -〔黄鸿波〕

大型Android系统重构实战 -〔黄俊彬〕

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