css元素position定位和z-index

网页元素定位

1.注意点：

1）给元素设定高度要小心，除非给已知大小的图片设置高度，否则无法得知指定元素在页面上会有多高。此时最好使用min-height。

2）对于同一个元素，不要讲float属性和（absolute,fixed）定位方式结合使用，但是和(static,relative)一起使用，（圣杯布局貌似就有将float与position:relative相结合的例子）.传统布局的三法宝：dispaly,position,float有时候结合使用能够实现各种各样的结果，当然在新版本浏览器中，很多实用flex更简单啦

 

2.css提供了四种类型的定位：

1）静态定位static：这是浏览器默认的定位方式，按照简单的从上到下的顺序排列页面流。

2）绝对定位absolute：使得页面元素脱离页面流，并将它置于网页的上层，有时候会遮挡住其他的内容。如果一个标签的位置是绝对的，并且它又不在任何设定了absolute,relative,fixed定位的元素里面，那么它就是相对于浏览器的窗口进行定位。如果一个标签处在设定了absolute,relative,fixed定位的标签里面，那它就是相对于该外围元素的边沿进行定位。

3）相对定位relative:让元素相对于它在网页的默认位置定位，并在元素未进行相对定位之前所处的位置上留下一个窟窿。因此，相对定位的好处有时候并不在于移动元素（虽然这点有时候也能实现一些特殊的效果），而是给它内部的元素设定一个新的参考点，此时相对定位的含义是“相对于我”定位，即设置了relative属性的外围元素，获取了一个绝对定位，该元素里面要定位的元素则获得了针对于该元素边沿的相对定位。

4)固定定位fixed:锁定在屏幕的某个位置，始终相对于body进行定位，与background-attachment:fixed类似。用户滚动元素时，固定元素会在页面上保持不变。

 

z-index：

关于z-index的介绍，参见这篇博客：http://www.cnblogs.com/bobodeboke/p/css.html

具体地说，有一下几点：

1）只有position的值为relative/absolute/fixed中的一个,Z-index才会生效；如果position为static，z-index是不会生效的；

2）当一个div的Z-index为整数时,它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。当一个div的Z-index为auto时,如果它和它的兄弟进行比较,采用它父元素的Z-index。

3）z-index不设置与设置为0的区别：如果不设置Z-index那么默认值为auto,则不建立层叠上下文。设置为0则会脱离文档流,建立层叠上下文。