- 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调!
- 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了
position:relative; → 必须先声明,自己要相对定位了,
left:100px; → 然后进行调整。
top:150px; → 然后进行调整。
相对定位的用途
- 微调元素
- 做绝对定位的参考,
相对定位的定位值
- 可以用left,right来描述盒子右,左的移动
- 可以用top,bottom来描述盒子的下,上的移动.
position: relative;
right: 100px; → 往左边移动
top: 100px;
position: relative;
right: 100px;
bottom: 100px; → 移动方向是向上。
绝对定位
- 绝对定位的盒子,脱离标准文档流,所有的标准文档流的性质,绝对定位之后都不遵守了.
- 绝对定位之后,标签就不区分所谓的行内元素,块级元素了,不需要
display:block;就可以设置宽高了
span{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点.