定位和堆叠

1.position: static, 非定位，默认值

              relative,相对定位（相对自己），在文档流中

              absolute,相对于非static祖先元素定位

              fixed，相对于视口绝对定位

 

2.relative

在常规流内布局，流内的其他元素当它没有偏移一样布局

 

3.absolute

脱离正常流

相对于最近的非static祖先的padding box 定位

不会对流内元素的布局造成影响

可以有margin，但不会折叠

 

Tip1:小技巧

当一个元素未设置width，或width：auto，但想让其占满整个父元素的width，可设置left:0,right:0,position:absolute

 

Tip2：小技巧

它的top,left,right,bottom,width,height都可以不指定，会根据指定的值自动计算出来

注意：当以上值都不指定数值，width：auto,元素就处于它原本所在的位置

 

4.position：fixed

相对于视口定位，不随页面滚动发生变化

 

5.z-index(用于定位元素)

为定位元素指定它在z轴的上下等级

用整数表示，数字越大，越接近用户

初始值：auto,正，负，0，inherit继承

 

Tip3：小技巧

让单行文字居中，可以不写height，直接写line-height,如：导航，button

 

补充z-index:

定位元素默认z-index：auto可看成z-index:0

z-index不为auto的定位元素会创建层叠上下文

z-index层叠顺序的比较止步于父级层叠上下文

7阶层叠水平——层叠顺序

从最底层——最上层

background/border

                        负z-index

                                        block块状水平盒子

                                                                  float浮动盒子

                                                                                        inline/inline-block水平盒子

                                                                                                               z-index:auto或看成z-index:0，不依赖z-index的层叠上下文

                                                                                                                                                                                                        正z-index