11-1定位之相对定位

相对定位
一、 定位:

  1. 定位是一个更加高级的布局手段
  2. 通过定位可以将元素拜访到也买你的任意位置
  3. 使用positon属性来设置定位
    在这里插入图片描述

二、 相对定位
1.-当元素的position属性值设置为relative时则启动了元素的相对定位
2.-相对定位的特点
2.1.相对定位特点1
元素开启相对定位之后,如果不设置偏移量元素不会发生任何变化
在这里插入图片描述

2.1.1.偏移量(offest)
当元素开启了定位之后,可以通过偏移量来设置元素的位置
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
注意:定位元素的垂直方向的位置由top和bottom两个属性来控制,通常情况下选中其一即可(top值越大,定位于是越往下移,bottom值越大,定位元素越往上移,当为负值时,则使其原理的反方向,控制着水平方向的left与right同理)
left:定位元素和定位位置左侧的距离
right:定位元素和定位位置右侧的距离
在这里插入图片描述

2.2相对定位时参照于元素本身在文档流的位置进行定位的
2.3 相对定位会提升元素的层级(即移动时,会覆盖其他的)
2.4 相对定位不会使元素脱离文档流
2.5 相对定位不会改变元的性质,即块级元素还是块级元素,行内元素还是行内元素

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页