【前端自学之路】CSS之position定位

position标识定位,就类似于百度地图上一系列定位点,position就是给html元素定位的。

position有四种值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 默认未设置的值,没有任何影响
*/
position: static;

<!-- more -->

/**
* 相对定位,以默认位置为参照起始点,进行偏移定位
*/
position: relative;

/**
* 绝对定位,以已经定位的最近的祖先元素为参考起始点,进行偏移定位,此时脱
* 离文档流
*/
position: absolute;

/**
* 固定定位,以浏览器窗口为参考起始点,进行偏移定位
*/
position: fixed;

上面所说的偏移定位,到底偏移多少呢?这个时候就要引出标识偏移值的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* left 标识当前元素左边沿相对于参考起始点左边沿向右偏移100px
*/
left: 100px;

/**
* right 标识当前元素右边沿相对于参考起始点右边沿向左偏移100px
*/
right: 100px;

/**
* top 标识当前元素上边沿相对于参考起始点上边沿向下偏移100px
*/
top: 100px;

/**
* bottom 标识当前元素底边沿相对于参考起始点底边沿向上偏移100px
*/
bottom: 100px;

关键是对以上定位意思和偏移学习了解,必然对元素定位熟悉透彻。

坚持原创技术分享,谢谢鼓励我继续创作!