《css定位 position》(知识点小结)

1 文档流

• 1.HTML中的三种布局方式
• • 1.标准流
• • 2.浮动
• • 3.定位
• 2.只有position属性值为relative、absolute、fixed才可以使用,top、right、bottom、left属性。

2 position-relative

     元素将相对于网页的最左最顶点为起始点，
       if(left≠0 && top≠0){
        向右进行X轴正方向运动，向下进行Y轴正方向运动     
       }
       if(left≠0 && bottom≠0){
        向右进行X轴正方向运动,向上进行Y轴正方向运动
        }
       if(right≠0 && top≠0){
        向左进行X轴正方向运动,向下进行Y轴正方向运动
       }
       if(right≠0 && bottom≠0){
        向左进行X轴正方向运动,向上进行Y轴正方向运动
       }

3 position-fixed

• 1.常用使用场景
• • 1.对联广告
• • 2.登录弹窗

4 position-inherit

• 1.继承父元素的position的属性值

5 z-index

• 1.可以设置元素的叠加顺序，但依赖定位属性(relative、absolute、fixed)
• 2.z-index大的元素会覆盖z-index小的元素
• 3.z-index为auto的元素不参与层级比较
• 4.z-index位负值，元素被普通流中的元素覆盖

6 定位和盒子模型的区别

• 1.盒子模型通过改变元素外边距或者内边距来实现元素的移动
• 2.定位是通过元素的位置移动来改变元素在网页中的位置