css元素position定位和z-index

网页元素定位

1.注意点：

1）给元素设定高度要小心，除非给已知大小的图片设置高度，否则无法得知指定元素在页面上会有多高。此时最好通过padding等来控制高度。

2）对于同一个元素，不要讲float属性和（absolute,fixed）定位方式结合使用，但是和(static,relative)一起使用，（圣杯布局貌似就有将float与position:relative相结合的例子）

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

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

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

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

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

备注：

1）上述定位中，设置position：relative和position:absolute（前提！）都可以使元素激活left,top,right,bottom和z-index属性（网页虽然是二维的，其实有z轴，大小由z-index来控制），默认情况下，所有元素都在z-index=0这一层，这就是文档流，设置position：relative和position:absolute都会让元素浮起来，就是说z-index>0。不同的是，position:relavtive会保留自己在z：index=0层的占位，虽然对其他z：index=0层元素没有影响；而position:ablolute则会完全脱离文档流，不会在z-index:0层保留占位，其他元素就会占据这个元素本来的位置，造成重叠的效果。

2）float也会改变文档流，不同的是，float属性不会让元素上浮到另一个z-index层，仍然会让元素在z-index=0层排列，其他元素就会环绕该元素而存在。也因为这个原因，float不能和任何一种定位方法结合使用。

3）综上可知，对于position:absolute元素，完全脱离原来层，其在原来层实际占据高度和宽度都是0；对于position：relative元素，依旧占据原来的高度和宽度，如果设置top，left不为0就会形成窟窿。对于浮动元素，在原来层实际占据的高度为0，宽度依旧保留（这就是造成浮动元素凸出的原因，需要为其父元素设置overflow:hidden来撑高其父元素）。对于以上这几种元素，其自身的高度和宽度由其中的内部元素撑开，或者宽度由人来设置。

3，元素堆叠

z-index :-1;值越大，就会出现在越接近顶层的位置，此外，还可以使用负数（IE7之前不支持负数）。

关于多个元素堆叠这个问题，除了设置了position为relative或absolute会激活z-index之外，还有一种特殊情况，并未激活z-index,但仍然让元素发生了重叠，这就是：负边距。

给元素设置“z-index”属性，首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。