CSS中position属性( absolute | relative | static | fixed )详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中position属性( absolute | relative | static | fixed )详解相关的知识,希望对你有一定的参考价值。

参考源:http://blog.csdn.net/chen_zw/article/details/8741365

我们先来看看CSS3 Api中对position属性的相关定义:

  • static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
  • Relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
  • Absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
  • Fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。

 

什么是文档流?

      将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

      只有三种情况会使得元素脱离文档流,分别是:浮动绝对定位相对定位

 

静态定位(static) :

      static,无特殊定位,它是html元素默认的定位方式,即我们不设定元素的position属性时默认的position值就是static,它遵循正常的文档流对象,对象占用文档空间,该定位方式下,top、right、bottom、left、z-index等属性是无效的。

 

相对定位(relative) :

      relative定位,又称为相对定位,从字面上来解析,我们就可以看出该属性的主要特性:相对。但是它相对的又是相对于什么地方而言的呢?这个是个重点,也是最让我迷糊的一个地方,现在让我们来做个测试,我想大家都会明白的:

 

 

 

 

(1) 初始没有定位

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #first{width:200px;height:100px;border:1px solid red;}
        #second{width:200px;height:100px;border:1px solid blue;}
    </style>
</head>
<body>
    <div id="first">first</div>
    <div id="second">second</div>
</body>
</html>

 初始原图:

技术分享

 

(2) 我们修改first元素的position属性:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #first{width:200px;height:100px;border:1px solid red;
                position:relative;top:20px;left:20px;}
        #second{width:200px;height:100px;border:1px solid blue;}
    </style>
</head>
<body>
    <div id="first">first</div>
    <div id="second">second</div>
</body>
</html>

相对偏移20px后,结果如下,虚线是初始的位置:

 技术分享

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是关于CSS中position属性( absolute | relative | static | fixed )详解的主要内容,如果未能解决你的问题,请参考以下文章

CSS中position属性( absolute | relative | static | fixed )详解

CSS中position属性( absolute | relative | static | fixed )详解

CSS中position属性( absolute | relative | static | fixed )详解

CSS position属性absolute relative等五个值的解释

css中的position属性

position属性absolute与relative 详解