css定位

2.为什么使用定位

我们如果要实现这种效果：

还有这种：

当我i们滚动页面的时候这个导航栏位置是不变的

3.定位详解

3.1边偏移

3.2定位模式

 

01静态定 位 

02相对定位

 

意思就是虽然这个盒子加了定位走了。但是他原来的位置还一直保留

03绝对定位 

标准流的盒子总是以父级盒子的位置为准，父级有了magin儿子紧贴着父亲

效果：

如果父级（包括父亲以上几级）没有定位，绝对定位的子盒子以我们文档为准（页面）移动位置，

如果父亲有定位，绝对定位的子盒子以父级为准移动位置

如果父亲没定位继续向上找爷爷，如果爷爷有定位（除了静态定位）以爷爷为准

概括一下就是：

绝对定位的特点：

04口诀子绝父相

如果父亲也是绝对定位那么父亲和儿子就都是脱标的，后面的元素就会到父亲的下面，全堆在一起了

05固定定位

总结一下就是固定定位只以浏览器的可视窗口为准

  

3.3定位拓展

01绝对定位的盒子居中

在相对定位中，我们可以设置margin的值为auto来实现盒子的水平居中

绝对定位以及固定定位中则不可以

绝对、相对要实现水平居中，两步走：

垂直居中同理在垂直方向移动

如果我们根据父亲盒子子盒子直接算出left，top多少，那么父盒子大小一变就不局中了

02堆叠顺序

 

给绿色盒子加了这个属性以后：

 

03定位改变display属性 

改变display属性：

1.利用display中的inline-block

如果给一个盒子，不加宽度，就会满屏

如果把它转换成行内块

行内块元素的特点是，内容有多宽，块就有多宽

 2.浮动也能将块级元素转换成行内块

3.绝对定位、固定定位也可以转换成类似行内块

 如span是行内元素，默认没有大小的，但是加了绝对定位就有了

4.外边距合并问题新的解决方案 

 这样会发生外边距合并：

只要任意给父亲或者儿子其中一个添加浮动或者绝对定位就可以