学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料、整理写下这篇随笔。

  首先,我们要清楚一个概念:文档流。

  简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右来布局。

  而脱离文档流,就是说,将元素从普通的布局排版中拿走。其他盒子在定位的时候,无视这个元素的存在而进行定位。

现在,谈谈position属性的这些值都有怎样的特性。

一、position:static

  CSS定位中的默认值。当元素不设定任何position属性时,默认用static进行定位。不定义position属性时,各对象都在原来的位置上保留。

 

上图忽略 top, bottom, left, right 或者 z-index 声明。

二、positon:fixed

  我们在刷微博、刷学者网、看QQ空间的时候,可以发现,导航栏一直浮于顶部,任凭滚动条的移动。

我们再打开浏览器的审查元素,可以看到:

三、position:relative

  relative和absolute一直是困扰初学者的两个定位属性。

  顾名思义,relative,相对,相对定位;absolute,绝对,绝对定位。

  w3C文档中对relative的解释是:生成相对定位的元素,相对于其正常位置进行定位。也即元素的“相对”是相对元素原来按照正常流的位置。

  

  现在我们给Hellodiv这个元素设置为left:20px;则元素从相对于正常位置向右偏移2px:

  当然,在实际的开发过程中,我们往往会碰到更精确的定位需求。我们要和父节点、要和兄弟节点协作完成。那么要注意:

  1.top与bottom同时存在的时候。只有top发挥作用,如top=20同时设置bottom=20;bottom是无效的,我们会看到浏览器中,bottom被忽略(中间的删除线)。

  2.left与right同时存在的时候,只发挥了left的作用。

  3.如果对中间的对象设置left:20px,则对象的原来的位置保留,而后面的对象则按照原来文档流保持不变。

四、position:absolute

  absolute绝对定位与文档流无关,因此不占空间,因为其相对定位被看做普通定位模型的一部分,因此后面的普通流就将它忽视。

  

  那么,绝对元素又如何绝对呢?

  W3C文档中这样描述:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。也即被定位为absolute的元素,其位置是相对于父节点而言的。

假设父元素包含子元素,则子元素的left属性表示左边框到父元素左边框的像素(当然这个父元素应当是最近的且已经定位的父元素)。

  

  如果没有已定位的父元素,OK,元素默认以浏览器窗口为父元素,其中top是距离浏览器窗口顶部的距离,left是距离左侧的距离。

最后,值得注意的是,虽然position:absolute定位使对象脱离文件流,当我们在一件F12的时候仍然可以看到脱离文档流的元素存在于dom树中。

参考:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.htm

   http://www.w3school.com.cn/cssref/pr_class_position.asp

    

  

  

  

  

  

  

  

细谈position属性:static、fixed、relative与absolute的更多相关文章

  1. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  2. position的static、relative、absolute、fixed、inherit

    网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...

  3. [转]Html position(static、relative、absolute、fixed)

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

  4. 知识点摸清 - - position属性值之relative与absolute

    两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...

  5. position 属性值:relative 与 absolute 区别

    absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...

  6. position 有五个值:static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  7. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  8. 510,position的值,relative和absolute定位原点是

    (absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  ...

  9. 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?

    display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...

随机推荐

  1. box-sizing

    Over the generations, people realized that math is not fun, so a new CSS property called box-sizing ...

  2. java 环境变量 windows(Java之负基础实战)

    1.已经安装了JDK 添加系统变量 1.1.添加JAVA_HOME jdk路径,例如:C:\Program Files\Java\jdk1.8.0_65 1.2. PATH 添加内容 %JAVA_HO ...

  3. plupload 异步上传插件使用心得

    plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...

  4. windows apache 开启 GZIP

    从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快.目前比较通用的压缩方法是启用gzip压缩.它 会把浏览器请求的页面,以及页面中引用的静态资源以压缩包 ...

  5. "类型初始值设定项引发异常"

    问题出现的原因:在对类中的字段或属性直接赋值的时候出现异常而造成的这个异常. 例如: class MyClass { public static string ConnectionString = G ...

  6. Android项目中打jar包 和 使用

    第一步,把普通的android project设置成库项目 库项目也是一个标准的android项目,因此你先创建一个普通的android项目. 这个项目可以起任何的名称,任何的报名,设置其他需要设置的 ...

  7. 用 NodeJS 实现 BigPipe

    BigPipe 是 Facebook 开发的优化网页加载速度的技术.网上几乎没有用 node.js 实现的文章,实际上,不止于 node.js,BigPipe 用其他语言的实现在网上都很少见.以至于这 ...

  8. Flex中escape/encodeURI/encodeURIComponent的区别

    Flex中提供了三种转码函数,各有各的区别, escape,encodeURI,encodeURIComponent 这三个函数不仅在flex中有道运用在javascript中同样的含义 ,今天我仔细 ...

  9. Java泛型类定义,与泛型方法的定义使用

    package com.srie.testjava; public class TestClassDefine<T, S extends T> { public static void m ...

  10. HTTP协议系列(3)---包括WebSocket简单介绍

    一.HTTPS     HTTP是超文本传输协议,那HTTPS是什么尼?要明白HTTPS是什么先要明白HTTP的缺点,想一下我们在使用HTTP的时候会有那些缺点尼? 1.通信使用的明文(不加密),内容 ...