固定定位 相对定位

359 阅读1分钟
  • 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调!
  • 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了
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;
}

一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点.