- 一.定位的作用:
- 定位可以让盒子任意摆放位置,一般用于盒子与盒子中的层叠效果.
- 二.定位的属性:
- 属性名position:绝对定位absolute,相对定位relative,固定定位fixed,静态定位static.
- 偏移值:上下左右方位名词+数值px.水平和垂直各取一个.
- 示意图:
- 三.定位的使用方法:
- 1.静态定位:
- 1.可以理解为标准流,设置偏移值是无效的.
- 2.相对定位:
- 1.需要配合偏移值进行使用.
- 2.相对于自身原来的位置进行移动.
- 3.在页面中占位置,没有脱标.
- 应用场景:配合绝对定位进行使用(子绝父相).
- 3.绝对定位:
- 1.需要配合偏移值进行使用.
- 2.默认相对于浏览器的可视区域移动位置.
- 3.在页面中不占位置,脱标.
- 绝对定位默认相对于浏览器的可视区域进行移动.
- 如果祖上元素都设有定位,就相对于最近一级进行移动.
- 4.固定定位:
用于固定在浏览器页面上，不随浏览器的滚动而改变位置；使用了固定定位后，元素会一直固定在页面的某一个位置!
- 四.子绝父相:
- 子元素使用绝对定位,父元素使用相对定位.
- 让子元素相对于父元素进行自由移动.
- 五.子绝父绝:
- 父元素设置绝对定位,子元素设置绝对定位就可以.
- 六.实现绝对定位的盒子水平垂直居中:
- 先定义子盒子为绝对定位,父盒子为相对定位.(子绝父相)
- 再让子盒子向右移动父盒子的一半,让子盒子往下移动父盒子的一半.
- left:50%;top:50%;
- 最后让子盒子向左移动自身宽度的一半,让子盒子往上移动自身高度的一半.
- margin-left:xxx; margin-top:xxx; (取负值)
- 实现绝对定位的盒子水平垂直居中优化做法:
- 1.先定义盒子为子绝父相
- 2.left:50%;top:50%;
- 3.transform:translate(-50%,-50%);
- (优化做法:使用transform位移,位移的取值为百分比时是以自身为参照进行移动,盒子即使改变大小也不影响盒子的位置!)
