Postion定位的使用

一、概要

position属性有四个值:static、relative、absolute、fixed。
staitc:默认值,默认效果
relative:相对定位,使用较多
absolute:绝对定位,使用较多
fixed:绝对定位,较少使用

二、效果

网络上有关css定位的实验较多,在这里就不例举代码说明,只介绍相关结论。

staitc:

默认值,显示的是默认效果,无需其他说明。

relative:

相对定位,当div使用该属性后,该div并不会脱离文档流,占有div原有的位置。如果再使用在使用position=relative的同时又指定top与left属性,则该div会以原先的位置为基点进行偏移定位。
Postion定位的使用
在该图片中,灰色部分的div position设置relative,left与top的偏移量分别设置为50px,故现在的div是以未进行relative设置原先的div进行偏移的。所以偏移量也就是红色矩形,长宽均为50px;

absolute

该属性最为常用,且常常配合这relative一起使用
absolute为绝对定位,div使用该属性后,脱离文档流,就像设置浮动一样。如果设置absolute的同时又设置top与left属性,则向上找,找到第一个position不为static的父div为基准设置偏移
Postion定位的使用
在此实例中,棕色部分设置了relatvie,天蓝色部分设置了absolute,子div的top与left是以棕色部分的div为基准进行偏移。红色矩形部门长宽均为40px;如果父div没有设置relative,在此示例中则以body为基准进行偏移。如下所示
Postion定位的使用
以body为基准进行偏移,红色矩形,为偏移量,长宽均为40px;

相关文章:

  • 2022-12-23
  • 2021-12-02
  • 2021-09-14
  • 2021-09-04
  • 2021-11-19
  • 2022-12-23
  • 2021-09-01
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-05-11
  • 2022-01-21
  • 2021-09-25
  • 2021-12-23
  • 2021-11-20
  • 2021-11-23
相关资源
相似解决方案