position属性（absolute; relative; fixed)以及相关属性z-index

来源：互联网发布：网络大学编辑：程序博客网时间：2024/06/09 17:26

position是定位的一种非常有用的标签，它的属性值有: static（静态定位）、absolute（绝地定位）、relative（相对定位）以及fixed(固定定位）这四种。在使用这中定位时，也经常会遇到一种z-index属性值，它是只属于position的属性值。以下文章主要讲述position的各个属性值的使用，以及它们与z-index的关联。

1.position的绝对定位和相对定位

绝对定位：脱离文档流。如果父模块有 position=relative，则在父模块中定位。否则，在窗口定位。top:0; left:0;之类都是直接做坐标。

相对定位：一种是相对于本身偏移量，top:50px; left=200px；不是指具体位置，而是偏移量。以下代码和效果举例：

设置position属性之前，原本位置见图1：

将DIV1绝对定位（position:absolute; top:0; left:0)，DIV2相对定位（ position:relative; top:100px;leftL200px;)之后，进行的操作为：DIV1位于窗口最左端， DIV2因为DIV1脱离文档流而上凑，处于原DIV1位置之后，再进行偏移：距原图上边界100px，左边界200px。最后得到的效果如下图2。

最后，我们可以在相对定位中使用绝对定位，使元素在父包裹层里处于任意位置。如下举例：

CSS代码：

<span style="font-family:SimHei;font-size:10px;"><strong>.Example_03{<span style="color:#FF0000;">position:relative;</span> background-color:#9F0; width:80%; margin:0 auto; height:300px; background-color:#C6F; margin-top:50px; border:5px #999999 solid;}.ab_in_relative{border:5px #efefef solid; height:100<span style="background-color: rgb(255, 255, 255);">px;<span style="color:#FF0000;">position:absolute;</span> to</span>p:10px; right:0;}</strong></span>

HTML代码：

<span style="font-family:SimHei;font-size:10px;"><div class="Example_03"><div class="ab_in_relative">position:relative做父容器，让子容器内position:absoutle绝对定位</div></div></span>

效果如图3所示：

2.在相对定位中使用绝对定位（有z-index)

2.1用relative-absolute或者通过margin

想在一个大包裹里将小包裹定位，用relative和不用relative作比较（图4）：

2.2 z-index属性

z-index只在设置了position模块的元素里才有效。如果不设置，z-index的值默认为0。值除了可以是正数（1，2,...)，也可以为-1,为-1时不显示（低于0了）。

CSS代码：

/*z-index只对所有设置了position属性值（relative或者absolute)起作用*/.Example_05{background-color:#efefef; height:600px;}.img_1{z-index:1; position:absolute; top:1150px; right:0;}.img_1_p{ position:absolute;top:1300px; right:0; color:#F00;z-index:2;}.img_2{z-index:-1; position:absolute; top:1370px; right:0;}.img_2_p{position:absolute;top:1400px; right:600px; color:#F00;z-index:2;}.img_3{z-index:0;position:relative; top:0; left:200px;}.img_3_p{position:relative;top:-50px; left:200px; color:#F00;z-index:2;}

HTML代码：

<span style="font-family:SimHei;font-size:10px;"><div class="Example_05"><img class="img_1" src="file:///F|/111111__实战/images/u=4038813840,2555373483&fm=21&gp=0.jpg" width="321" height="220"  /><p  class="img_1_p">test1: position:absolute;z-index:1;</p><img class="img_2" src="file:///F|/111111__实战/images/u=4038813840,2555373483&fm=21&gp=0.jpg"  /> <p class="img_2_p">test2: position:absolute;z-index:-1;</p><img class="img_3" src="file:///F|/111111__实战/images/u=4038813840,2555373483&fm=21&gp=0.jpg"  /><p  class="img_3_p">test3: position:relative;z-index:0(默认值）;</p><p style="color:#345; z-index:-1;">普通标签：z-index:-1;（表明只对于position来说，才有z-index，其余的时候都不起作用。。。。）</p><p style="color:#345; z-index:0;">普通标签：z-index:0;只有对于position来说，才有z-index，其余的时候都不起作用。。。。</p><p style="color:#345; z-index:2;">普通标签：z-index:2;只有对于position来说，才有z-index，其余的时候都不起作用。。。。</p></div></span>

实验效果（图5）：

3.position的fixed值（固定定位）

position：fixed代表固定定位，特点是：随着滚动条的滚动，它在窗口出现的位置不变，其他元素从它之下穿过。它与绝对定位absolute相似点在于，都脱离了文档流。以下是主要区别：

绝对定位：如果没有父包裹层，设置的位置以<html>为基准。有父包裹层（"relative-absolute"结构），则以它的父包裹层为基准。

固定定位：只要设置了位置，都以可视窗口为基准。（常用来做固定层，一般是放在最上top:0或者最下buttom:0)

以下实践举例：在仿百合网注册首页中，把头部.head该为固定层。因为内联css优先级高于外联，所以不需修改css文件，只要再覆盖。

CSS:

<span style="font-family:SimHei;font-size:10px;"><title>fixed固定定位</title><link type="text/css" rel="stylesheet" href="file:///F|/111111__实战/css/bai_he_Wang.css" /><style type="text/css">/*把静态的百合网登陆页面（百合网网页结构尝试二）变成头部固定的fixed页面。。*//* 。此时，下拉滚动条，position:fixed固定在窗口*//* 由于内联css的优先级高于外联，所以不修改外联css里的样式了*/.head{ background-color:#FFF;position:fixed; top:0; z-index:1;}/* 因为在布局时，用的是两边固定，中间自适应的结构，所以，两边使用了position:absolute；*而在滚动的时候，同一显示级（z-index默认值为0），同样脱离文档流。。*会对head 类造成遮盖，所以需要定义z-index=2>0;*/</style></span>

HTML:

<span style="font-family:SimHei;font-size:10px;"><div class="head"><img src="file:///F|/111111__实战/images/img-pic-1-title.jpg" /><span class="head_title"><span style="color:#F50;">1</span>亿会员 | 实名婚恋网开创者 | 每天上千对牵手幸福！</span><span class="head_login"><input type="button" value="登 录" style=""/></span></div></span>

显示效果滚动前如图6：

滚动后效果见图7：

0 0