说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框, 而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

定位属性:position

​ 作用:检索或者设置元素的定位方式(简单来说就是改变元素位置的属性)

定位的主要方法:

1:静态定位:static

2:绝对定位:absolute

3:相对定位:relative

4:固定定位:fixed

5:黏性定位:sticky

定位的步骤:

​ 1:给元素添加position属性,证明该元素要做位置的变化。

​ 2:确定参照物!(通过position的属性值来确定:static\absolute\relative\fixed\sticky)

​ 3: 确定坐标 left right top bottom

定位各方法的实际应用:

​ 1:static 静态定位:

​ position的默认值,默认文本流的状态。

​ 不会识别left right top bottom指定的坐标

​ 该方法为默认值,一般情况下不使用,不加以简述;

​ 2:absolute 绝对定位:

​ a : 参照物:按照已经有定位的父元素进行位置的变化。

​ b : 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。

​ c : 绝对定位,脱离文档流、不占据空间!!!

​ 例:包含块的设置:

​ 1:如果父元素为参照物:添加 position:relative;

​ 2: 给要做定位的子元素 添加position:absolute;

CSS之position定位

​ 3: relative 相对定位:

​ a : 参照物:自身默认的位置!

​ b : 始终占据空间,不会破坏文档流

​ 例:利用定位将h3定位到h4上

CSS之position定位

​ 4:固定定位: position :fixed;

​ a : 参照物:浏览器窗口

​ b : 脱离整个文本流。不占据空间

​ 例:让该元素在浏览器窗口上下左右居中

CSS之position定位

​ 5:黏性定位:position:sticky;

​ position:relative 和 position:fixed的结合。

​ 如果页面没超出窗口范围,按照relative 执行

​ 如果内容超出窗口位置,按照fixed执行。
例:可用来实现导航条吸顶效果

CSS之position定位

最后,有一些使用过程中需注意的事项:

在使用absolute过程中:

1:margin:0 auto; 不起作用。

2:float不起作用。

3:如果一个元素没有设置宽度 并且添加了绝对定位,元素宽是内容撑开的宽,如需跟随父元素的宽可给该元素添加width:100%。

定位后的元素:

​ 1:后定位的元素会把前面定位的盖住。

​ 2:z-index:

​ 控制定位元素的层次关系

​ 属性值为一个数字(可以为负数),数字越大,层次关系越高

​ 默认值 auto;

以上是个人理解,仅供参考!

相关文章:

  • 2021-09-18
  • 2021-06-30
  • 2021-10-26
  • 2022-02-28
  • 2021-06-02
  • 2021-06-06
  • 2021-07-17
猜你喜欢
  • 2022-12-23
  • 2021-12-04
  • 2021-07-12
  • 2021-04-19
  • 2021-10-12
  • 2021-04-23
相关资源
相似解决方案