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”之一。

上一篇:css---遮罩层


下一篇:阿里云主机和RDS使用心得