也许你看到这个标题觉得很简单，确实这是一篇关于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. DLL导出与调用约定

    一般来说,从DLL导出函数有两种方法.一种是使用.def文件:另一种是使用__declspec(dllexport). 使用上面两种方法各有优缺点.使用.def文件就是需要额外维护,当导出函数更改名字 ...

  2. Linux下对拍脚本与随机数生成器

    对拍脚本 新建一个文档 check.sh 作为对拍脚本. #!/bin/bash while(true)do #死循环 ./data > .in #运行数据生成器,将数据输出到1.in ./st ...

  3. BZOJ_4196_[NOI2015]_软件包管理器_(树链剖分)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=4196 给出一棵树,树上点权为0或1.u权值为1的条件是从根节点到u路径上的所有点权值都为1.u ...

  4. Linux内存调试工具初探-MEMWATCH

    C 语言作为 Linux 系统上标准的编程语言给予了我们对动态内存分配很大的控制权.这种自由可能会导致严重的内存管理问题,可能导致程序崩溃或随时间的推移导致性能降级. 内存泄漏(即 malloc()  ...

  5. python 零散记录(四) 强调字典中的键值唯一性 字典的一些常用方法

    dict中键只有在值和类型完全相同的时候才视为一个键: mydict = {1:1,':1} #此时mydict[1] 与 mydict['1']是两个不同的键值 dict的一些常用方法: clear ...

  6. devi into python 笔记（三）callable getattr lambda表达式

    常用的函数:callable():如果所给参数是可调用的,返回True 不可调用返回Fasle.这里指的是否能调用说的是方法.类方法等有doc string的东西,一个单纯的字符串等就不算了. imp ...

  7. C# 4.0 新特性

    http://www.cnblogs.com/webabcd/archive/2010/05/27/1744899.html 在MVC中Controller的action方法 常用的:可选参数和参数默 ...

  8. iOS按钮长按

    UILongPressGestureRecognizer *longPressGR = [[UILongPressGestureRecognizer alloc] initWithTarget:sel ...

  9. linux内核数据结构--进程相关

    linux里面,有一个结构体task_struct,也叫“进程描述符”的数据结构,它包含了与进程相关的所有信息,它非常复杂,每一个字段都可能与一个功能相关,所以大部分细节不在我的研究范围之内,在这篇文 ...

  10. Ajax页面跳转

    <script type="text/javascript" >    $(document).ready(function () {            $(&qu ...