css js position

来源：互联网发布：java单链表编辑：程序博客网时间：2024/05/15 10:32

关于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="first"的属性left:50px;和top:50px;就相对于它的父元素id="wrap"这个div。

了解这些之后就再也不会为position这个属性感到无法下手了。