首页 > 代码库 > 解读position定位

解读position定位

解读position定位

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position常用的值有四种:

relative:生成相对定位的元素,相对于其在普通流中的位置进行定位。可以通过left、right、top、bottom来定位。

absolute:生成绝对定位元素,相对于最近一级的定位不是static的父元素来进行定位。脱离正常文档流,可以通过left、right、top、bottom来定位。

fixed:生成绝对定位,通常相对于浏览器窗口或frame进行定位。元素脱离正常文档流。可以通过left、right、top、bottom来定位。

static:默认值,无定位,元素按照正常文档流规则排列。

例:

         <!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <style>

           #p1{position:static;top:50px;left:50px;}

           #p2{position: relative;top:50px;left:50px;}

           #p3{position:absolute;top:50px;left:50px;}

           #p4{position:fixed;top:50px;left:50px;}

       </style>

    </head>

    <body>

              <p id="p1">111我是static定位</p>

              <p id="p2">222我是relative定位</p>

              <p id="p3">333我是absolute定位</p>

              <p id="p4">444我是fixed定位</p>

    </body>

</html>

在上述代码中,有4个<p>元素;分别用了4种定位。效果如下:

技术分享

第一种static定位,虽然给了top、和left的值,但是位置没有改变。

第二种relative定位,给了top、left的值是50px,位置相对与以前的正常位置向右向下移动了50像素。

第三种absolute定位,脱离从前的位置,直接在body里定位在距离上50像素,距离左50像素的位置。也就是说,如果正常情况下,这个<p>标签的位置应该为top:30px;left:30px;那么相对定位又给了top:50px;left:50px;后,它的位置就变成了top:80px;left:80px;

第四种fixed定位,乍一看,是和absolute重叠了,但是如果这个页面很大,向下滑动的时候,absolute定位会向上移动,但是fixed会一直在相对于屏幕固定的位置。常见的应用就是特别熟悉的广告

 

不管怎么上下滑动页面,它总是讨厌的在右下角。

 

absolute定位还有一个小功能,和clip:rect一起用。

如果一个图片,我们只需要它的一部分,那么可以使用

img

{

position:absolute;

clip:rect(0px  50px  200px  0px)

}

来剪切出一部分图像

 

z-index可以表示优先级。

如果让文字在图片上显示,不一定非要把图片编辑成背景,也可以让图片的层级比文字低级。

 

    p{position:absolute;z-index: 1;}

    img{ position:absolute;z-index: -1;}

 

以上就是我常用的一些position属性和应用。

解读position定位