也许你看到这个标题觉得很简单，确实这是一篇关于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. [cocos2d]场景切换以及切换进度显示

    本文主要分两个部分叙述,第一是场景切换,第二是场景切换的进度显示. 一.场景切换 参考learn-iphone-and-ipad-cocos2d-game-development 第五章内容 coco ...

  2. ASP.NET MVC 下 引用阿里巴巴和IconFont字体路径404问题

    参考:http://stackoverflow.com/questions/28169365/font-wont-get-found-on-server-for-firefox# http://blo ...

  3. Timer计时不准确的解决方案 每次都重新调整，修正误差

    http://stackoverflow.com/questions/29722838/system-timers-timer-steadily-increasing-the-interval 需要在 ...

  4. Linux 日常使用指令大全

    001.日常维护常用查询命令 #top    显示系统进程 #clear  清理屏幕信息 #cat /etc/redhat-release  查看系统版本信息 #cat /proc/version   ...

  5. Oracle core05_事务和一致性

    事务和一致性 oracle的redo和undo机制保证了数据库的ACID特性,以及高性能和可恢复特性. redo的数据是记录着数据块变更的顺序的正向数据流, commit时,保证redo同步持久化,保 ...

  6. BZOJ_3196_二逼平衡树_(树套树,线段树+Treap)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3196 可以处理区间问题的平衡树. 3196: Tyvj 1730 二逼平衡树 Time Lim ...

  7. （转载）可重入函数（reentrant function）

    (转载)http://blog.163.com/xu_jin_rong/blog/static/1491966220086775017178 由于cublog系统的缘故,将前段时间写的一篇blog文章 ...

  8. Linux Mono OpenShift Cloud9 rhc

    OpenShift Mono Asp.net MVC4 MySql 1..Net4.0+Mvc4,不要使用太新的.Net4.5.1+Mvc5. 2.MySql数据库:MySql.Data.Dll 从官 ...

  9. Kernel compiling for Pi 2

    https://www.raspberrypi.org/forums/viewtopic.php?f=66&t=101188&p=807579&hilit=cross+comp ...

  10. yii中上传图片及文件

    Yii 提供了 CUploadedFile 来上传文件,比如图片,或者文档. 官方关于这个类的介绍 : http://www.yiichina.com/api/CUploadedFile CUploa ...