static

 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”

relative

relative 表现的和 static 一样,除非你添加了一些额外的属性。

在一个相对定位(position属性的值为relative)的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

fixed

一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom 和left 属性都可用。

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素

如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,

并且它会随着页面滚动而移动。记住一个“positioned”元素是指position 值不是 static 的元素。

层级关系为:

<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

参照物为最顶级的元素情况
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。  
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:

IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:

转载:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html

不错文章:http://zh.learnlayout.com/position.html

css中position中的几个属性的更多相关文章

  1. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

  2. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  3. 最容易理解的CSS的position教程——十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  8. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

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

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. TCP中ECN的工作原理分析二(摘自:RFC3168)

    英文源:http://www.icir.org/floyd/ecn.html 发送端和接收端处理: The TCP Sender For a TCP connection using ECN, new ...

  2. mybatis判断list为空

    在传入的map或者对象里面存在一个list,此时想要判断list是否为空,可以 <if test="spids.size()>0 " > and SPid not ...

  3. eclipse 导入 Maven 多模块项目

    右键 --> Import --> Existing Maven Projects --> 项目目录 选中所有子模块 --> Delete(一定不要勾选Delete proje ...

  4. 一键强制修改任意Mysql数据库的密码,修改任意环境Mysql数据库。

    本文采用我软件里面的内置改密功能,可以一键强制修改Mysql数据库的密码, 在修改过程中,会强制干掉Mysql主程序,修改完成后重新启动Mysql就可以了. 首先讲解如何一键强制修改PHPWAMP自身 ...

  5. 驱动10.nor flash

    1 比较nor/nand flash NOR                                  NAND接口:    RAM-Like,引脚多                 引脚少, ...

  6. 学习OpenCV,看这些!

    OpenCV简介: OpenCV 是一款功能强大的跨平台计算机视觉开源库,可以用于解决人机交互.物体检测.人脸识别等领域的问题.库本身是采用 C++ 编写的,但是同时也对 Python, Java, ...

  7. 疑问:关于postgres的to_number()

    postgres中的to_number(text,number),即是把字符串text转为number的函数,但有时候用的时候经常碰到这样的错误:[Err] ERROR:  invalid input ...

  8. libguestfs-tools 虚拟机磁盘管理工具

    libguestfs-tools虚拟机磁盘管理工具: 官网:http://libguestfs.org/ 这是一个非常强大的虚拟机磁盘管理工具,该工具包内包含的工具有virt-cat.virt-df. ...

  9. codeforces 192A Funky Numbers

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. oc内容5大区

    1.堆区(malloc):不需要手动管理内存,自动管理 2.栈区(stack):需要手动管理内存 3.静态区 4.常量区 5.方法区 load类方法:把类加载进内存的时候调用,只会调用一次 initi ...