关于css position属性
很多人都会看到css中position:absolute 和position:relative属性但是大多数前端开发员并不是很了解position:absolute 和position:relative的区别,而这两个属性又是做网页效果必不可少的,网上也有很多地方讲到这两个属性,但是都讲得不是很明白。在默认情况下Dom元素都是在z-index:0这一层,但是很多地方要实现js效果必须是某些元素不在一层,这个时候我们就会用到position属性了,position可以设置relative,absolute,fixed,static,这里我们只讨论前两个,后面两个都比较简单。
设置position:relative;或者position:absolute 会让元素浮动起来,设置 z-index:1000px;后元素就在z-index:1000px;这个层面了,这时区别就来了,这两个属性都可
使元素浮动起来,不在原来层面,但是position:relative;意思是相对的,这里相对就是相对自己在z-index:0的位置,它会保留自己在z-index:0的位置,而相对原来位置,
此时不会对z-index:0;其它元素位置造成影响,而position:absolute;不是这样的,看个例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>postion.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body >
<div id="wrap" style="width:300px; height:300px; border:2px solid pink; margin:100px;">
<div id="first" style="width:100px;height:100px; border:1px solid red; margin:10px; background-color:yellow;">
first
</div>
<div id="second" style="width:100px;height:100px; border:1px solid green;margin:10px; background-color:orange; ">
second
</div>
</div>
</body>
</html>
首先在外层有一个div然后里面有两个div分别是id="first",id="second",两个都有不同的背景颜色,易于区别,开始时不设置任何position属性,效果和想象中一样,如图,
修改<div id="first" style="width:100px;height:100px; border:1px solid red; margin:10px; position:relative;left:50px;top 50px; z-index:100px; float:left"></div>,这里我设置的z-index:100px;这里100px可以随便为多少,然后设置了left:50px;和top:50px;让它偏离原来位置,注意这里的left和top是相对它自己在z-index:0的位置,效果如下(注意id="second" 的这个div的位置),
这里可以很清楚的看到id="second"的 这个div并没有受到id="first"的影响,因为设置position:relative;后id="first" 保留了自己在z-index:0;上的位置,所以下面的div不会受到影响,这是position:relative;和position:absolute;最大的区别。接下来看一下设置position:absolute的效果上的区别,这把id="first" 的属性改为position:absolute;改动如下:
<div id="first" style="width:100px;height:100px; border:1px solid red; margin:10px; background-color:yellow; position:absolute;left:50px;top:50px; z-index:100px;"> first </div>
结果如下图
这里我们可以很清楚的看到和刚刚position:relative;的不同,这是,id="first"的div已经脱离了原来的文档流,在z-index:0px;这一层没有保存自己的位置,所以id="second"的位置也受到了影响。这里还有一个问题是,当id="first"的div设置position:absolute; left:50px; top:50px; 这里的left和top是相对于谁的?它会相对于它的第一个非静态定位的祖先元素,如果祖先元素没有非静态定位的,那就是相对整个body,上面的例子id="first" 的div的祖先元素中没有非静态定位的,所以上面的left:50;和top:50;是相对body的。这里有两点需要注意的地方,第一是非静态定位,也是就元素设置了position:relative;或者position:absolute;或者position:fixed; 第二点是祖先元素,也就是它的父元素或父元素的父元素...。来看一下,这里id="first"的直接父元素是id="wrap"当然这肯定是祖先元素了,当我给id="wrap"的div加上position属性后看看效果,改动如下:
<div id="wrap" style="width:300px; height:300px; border:2px solid pink; margin:100px; position:relative; left:10px;top:10px;">
.....
</div>
可以看到此时id="first"的属性left:50px;和top:50px;就相对于它的父元素id="wrap"这个div。
了解这些之后就再也不会为position这个属性感到无法下手了。