web页面常用布局：定位，可以使盒子自由移动位置或固定位置

定位 = 定位模式 + 边偏移；决定元素的最终位置。

 

定位模式：

1. static:是默认值，在文档流中就是这个值。
2. relative：相对自身原来的位置定位，不脱标，原来位置仍保留
3. fixed：相对浏览器窗口来定位,脱离了文档流
4. absolute：相对第一个已经定位（position属性值不是static）的祖先元素定位，脱离文档流
   1. 如果没有祖先元素定位，就会相对浏览器窗口定位
   2. 如果有祖先元素使用了定位，就会相对第一个（从内到外）使用了定位的祖先元素定位

边偏移：top，left，right，bottom

“子绝父相”的布局：

子级是绝对定位的话，父级要用相对定位

 

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

 

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位 。但有些情况下也会遇到子绝父绝等情况。

 

定位的叠放次序：

z-index: 1;

无单位，只有定位的盒子才有 z-index 属性；默认值auto，数值越大盒子越上。

定位拓展：

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3.浮动元素、绝对定位(固定定位）脱标元素都不会触发外边距合并的问题。

4.绝对定位（固定定位） 会压住下面标准流所有的内容，浮动不会（最初用于文字环绕）

 

定位压住文字：

 

浮动用于文字环绕：