代码改变世界

position四个属性值的详解

2012-06-07 10:17  臭小子1983  阅读(532)  评论(0编辑  收藏  举报

  我在以前的公司,并不怎么用position这个属性,只是在写一些特殊效果的时候才用绝对定位。这就导致我对这个属性很不理解。今天有空,百度学习了一下。留下下面的文字

position的四个属性值: relative ,absolute ,fixed,static (画外音:inherit其实也是,不过今天不怎么说他~)

写个小小的页面:

复制代码
<html>
<head>
<style>
#parent
{}
#div1
{border:1px red solid; width:200px; height:100px}
#div2
{border:1px blue solid; width:200px; height:100px}
</style>
/head>
<body>
<div id="parent">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>
复制代码

这是原始页面的样子:

1、relative

  这个值比较简单,它的偏移是相对自己来进行的。意思就是,div1如果设置了relative值,那么,它的偏移,就会根据top,right,bottom,left的值以它原来的位置为基准偏移,而不管其他元素会怎么样。

  不信?试试看。

注意:例子中2个div是同级关系哦~~

#div1{border:1px red solid; width:200px; height:100px;position: relative;  top: 15px; left: 25px;}

  div1的样式改成这样。div2不动。那么,页面的样子变成下面

  好啦。看到了吧~如果不设置relative时div应该在哪里就在哪里,一旦设置后就按照它理应在的位置进行偏移。

  div2呢?它还在原来的位置,如果你给他设置relative,那么他也会偏移。

  最后说一句:relative的偏移是基于对象的margin的左上侧的。就是说,如果你设置了margin,那么偏移的时候会加上的。


2、absolute

  css手册是这样说的:“生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

但是他究竟是根据谁来偏移的呢?

  这里有2种状况,用div1来说明:
1、如果div1父容器(id='parent'的div)没有设置position属性,那么div1的偏移是以body为依据的。比如这样(下面去掉了div2,方便看清楚):

复制代码
<html>
<head>
<style>
body
{ margin:50;border:1px green solid; height:200px;}
#parent
{}
#div1
{border:1px red solid; width:200px; height:100px;position:absolute; top: 15px; left: 25px;}
</style>
</head>
<body>
<div id="parent">
<div id="div1">div1</div>
</div>
</body>
</html>
复制代码

这样的效果如下:

看到了吧。div1是以body为基准偏移的。

2、如果div1的父容器设置了position属性,并且position的属性值为absolute 或者relative,那么div1就会依据父容器进行偏移。比如这样:

复制代码
<html>
<head>
<style>
body
{ margin:10px;border:1px green solid; height:500px;}
#parent
{position:absolute; border:1px black solid; width:400px; height:200px; margin:20px;}
#div1
{border:1px red solid; width:200px; height:100px;position:absolute; top: 15px; left: 25px;}
</style>
</head>
<body>
<div id="parent">
<div id="div1">div1</div>
</div>
</body>
</html>
复制代码

最终效果如下:

  需要注意的是:如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

 

那么放两个div在父容器里面呢?比如这样:

复制代码
<html>
<head>
<style>
body
{ margin:10px;border:1px green solid; height:500px;}
#parent
{position:absolute; border:1px black solid; width:400px; height:200px; margin:20px;}
#div1
{border:1px red solid; width:200px; height:100px;position:absolute; top: 15px; left: 25px;}
#div2
{border:1px blue solid; width:200px; height:100px;}
</style>
</head>
<body>
<div id="parent">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>
复制代码

效果如下:

  div1设置了position属性,导致它浮动起来了。div2就占据了原来div1应该在的位置~

 

3、fixed

这个好理解,它总是以body为依据的。

复制代码
<html>
<head>
<style>
body
{ margin:10px;border:1px green solid; height:300px;}
#parent
{position:absolute; border:1px black solid; width:400px; height:200px; margin:20px;}
#div1
{border:1px red solid; width:200px; height:100px;position:fixed; top: 15px; left: 25px;}
</style>
</head>
<body>
<div id="parent">parent
<div id="div1">div1</div>
</div>
</body>
</html>
复制代码

效果如下:

 

4、static

  这其实是position的默认值。。。

  好吧好吧。还有一个inherit,其实那意味着继承父容器的position 属性的值,可以自己试试看~~~这里不贴了。

  三千红尘非我恋,不堕轮回自在身