position属性定位

1、HTML中有三种布局方式：标准流（顺序布局）、浮动、定位（层模型）（position）

块级元素单独占一行从上到下排列，行内元素共享一行

position改变元素正常的标准流，以非正常的方式脱离标准流（需要有left、right、top、bottom设置值，否则仍然是处于标准的文档流中的）；后写的元素会覆盖掉先写的元素，出现层的概念,

 

position可选的参数（定位属性)：

static:（就相当于没有定位属性）

relative：top、right、left、bottom相对于不同的原点进行位置的移动

absolute：top、left、right、bottom相对于网页的四个顶点作为初始点，子绝父相，父元素带有relative定位的属性则子元素absolute受限制。

fixed：常用的有对联广告、登录弹窗`等，top、left、right、bottom相对于网页的四个顶点作为初始点，不受父元素的限制，即使父元素带有定位的属性

四种定位方法中，static、relative占位置；fixed、absolute不占位置

inherit：继承的是父元素的定位属性，

1、.test*3

2、z-index只作用于带有属性定位的元素，子元素永远在父元素的上方，

 

5、盒子模型和定位的区别：盒子靠设置margin、padding来实现元素的移动，定位通过定位属性和left、right、top、bottom的值来实现元素的移动。

6、固定定位水平垂直居中

.contain{

                        width: 100%;

                        height: 100%;

                        position: fixed;

                        left: 0;

                        top: 0;

                        border: 1px solid blue;

                  }

                  .box1{

                        width:360px;

                        height:360px;

                        position: fixed;

                        left:50%;

                        top:50%;

                        margin-left: -180px;

                        margin-top: -180px;

                        border: 1px solid blue;

                  }

7、折叠的导航栏

8、