CSS定位position

CSS定位position

position属性的意义：
position属性决定了元素将如何定位
通过改变top、right、bottom、left(单位可以是像素，也可以是百分比)实现位置改变

position中的可选参数
1.static， 默认值 元素按照标准流的方式进行正常的排列
2.relative，相对定位  元素仍然处于正常的文档流中，但可通过top、right、bottom、left（单位px，可正可负）来改变元素的位置，移动区域为整个网页
               设置了left、right、top、bottom的元素是相对元素自身原来位置的偏移大小
               在使用相对定位时，元素被偏移了，但他仍然占据着没偏移之前的空间
               使用相对定位，使块级元素有了层的概念，后定义的元素层级大于先定义的层级

3.absolute，绝对定位 使用top、right、bottom、left定位元素使元素脱离正常文档流，在整个网页中可以进行定位，并且拥有了层级的概念，后定义的元素将覆盖先定义的元素
                 如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，不占据原来空间
                 相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，
                 如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，
                 如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）
4.fixed，固定定位 元素脱离正常文档流，并拥有层级的概念
           通过改变top、right、bottom、left实现位置改变 移动区域为整个窗口，不受制于父元素
           无论网页有多大，上下翻页，元素都会固定在窗口的某个位置
inherit ，继承父元素的定位属性  

z-index属性：值是数字，默认为0
可以设置元素的叠加顺序，但依赖定位属性(只作用于带有定位属性的元素)
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖

z-index层级受制于父元素的影响，父元素的层级大于其兄弟元素的层级，无论子元素的层级多小，都大于父元素兄弟元素的层级
扩展：要想父元素覆盖子元素，父元素无需设置z-index，子元素z-index设置为负数