也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Position的一些细节也许你不了解。

1、简介
 position有五个属性： static | relative | absolute | fixed | inherit
 static 和 inherit : 没什么值得介绍的。
 relative : 相对于元素自身的定位。
 absolute ：相对于包含块的定位。
 fixed : 相对于窗口的定位。

2、包含块

包含块就是 top | right | bottom | left 参考的元素。
absolute的包含块指的是：该元素最近的具有定位设置的父元素，即最近的position属性值不为static的祖先元素举个例子：


<body>

<div id="outer" style="position:absolute">

    <div id="inner">

        <span style="position:absolute">span</span>

    </div>

</div>

</body>

对于span元素来讲，它的包含块是#outer，而不是#inner,因为#outer设置了 position:absolute。值得注意的是，只要#outer设置了 absolute | relative | fixed span元素的“定位父元素”就是#outer，如果outer没有设置三种属性的其中之一，则span的包含块就是html元素。

relative的包含块指的是：元素自身。

3、top | right | bottom | left 的细节。
也许你会想当然的认为这些值有什么细节可言，那你就错了。在此以left为例：
left值 = “定位父元素”border内边 到 该元素margin外边的举例 ，简单的记忆就是“border内,margin外”。

right | bottom | left 也是这种道理

4、z-index
关于z-index的细节，这里就不说了，因为觉得自己表达不清，而且《CSS权威指南》相应章节里对z-index讲的非常清楚(特别是叠放上下文的相关知识)，这些知识是非常有用的。
如果你能看懂下面这个层叠顺序，则证明你对z-index的学习已经非常成熟了。要注意其中#one1 元素 #two元素的层叠顺序。

例子：http://www.kangchangan.cn/cnblog/zIndexStackingContext.html

5、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed ， 该元素就会脱离文档流。
但是relative元素是个特例，因为该元素对然脱离了文档流，但是它原本所占的空间仍然占据文档流。

例如：

代码

6、positon 与 display
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位
     <span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的，
     <span style="position:absolute; display:block; width:100px; height:100px;">span</span>，这里的display:block就是多余的了。

7、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

CSS中Position属性的更多相关文章

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

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

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

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

  3. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

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

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

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

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

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

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

  7. CSS中position属性 （absolute，relative，static，fixed）

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

  8. css 中 position属性

    position属性详解 文档流 1.html中的布局方式分为三种: 标准流(顺序布局):因为html中的元素大体可以分为两大类(a:块级元素:div .H1-H6. table表格  有序级无序列表 ...

  9. 转：深入理解css中position属性及z-index属性

    原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...

随机推荐

  1. 安装Chive提示CDbConnection failed to open the DB connection.

    最近初学PHP,看到Chive这个好玩的数据库管理工具,在登录时遇到这样的错误提示信息: CDbConnection failed to open the DB connection. 我的PHP版本 ...

  2. MongoDB的备份（mongodump）与恢复（mongorestore）

    备份: D:\mongodb2.4.3\bin>mongodump -u101.key -p123 -h 127.0.0.1:27017 -d mydb -o d:\backup 恢复: D:\ ...

  3. 12篇学通C#网络编程

    转自:http://www.cnblogs.com/huangxincheng/archive/2012/01/03/2310779.html 在C#的网络编程中,进程和线程是必备的基础知识,同时也是 ...

  4. android自动化(2)

    使用monkeyrunner 自动化删除程序的时候出现如下错误 在任务管理器卸载android adb,Ok..然后再次使用的时候就出现这个问题, Try below steps: Close the ...

  5. 排序算法_MergeSort

    算法思想: 分治自顶而下实现归并排序: 分治法的三个步骤     设归并排序的当前区间是R[low..high],分治法的三个步骤是:①分解:将当前区间一分为二,即求分裂点               ...

  6. HTML5与CSS3权威指南.pdf7

    第14章 使用选择器在页面中插入内容 使用选择器来插入文字图片 上一章提到过使用before和after伪类为某个元素之前或之后插入内容 h2:after{content:'12345'},也可以指定 ...

  7. SSH整合逻辑图

    Struts,Spring,Hibernate三大框架的整合过多次,但自己理解的结合大师讲的对比起来,感觉还是有不少的差距. Struts,开发Web层框架,提供整洁的MVC结构,分离了各层关注,降低 ...

  8. GCC基本知识

    掌握下面的对GCC会有一个比较清晰的大致的了解: 不经意间,GCC已发展到了4.3的版本,尽管在软件开发社区之外乏人闻问,但因为GCC在几乎所有开源软件和自由软件中都会用到,因此它的编译性能的涨落会直 ...

  9. C++ 把输出结果写入文件/从文件中读取数据

    先包含头文文件 #include<fstream> 输出到文件 ofstream fout;  //声明一个输出流对象 fout.open("output.txt"); ...

  10. 阐明iOS证书和provision文件

    译:阐明iOS证书和provision文件 许多iOS开发人员都会和你说在iOS开发很困惑的问题之一,将app真正运行在真实的设备(iPhone iPad而不是模拟器),因为所有的这些都会涉及从苹果获 ...