CSS中的Position属性
也许你看到这个标题觉得很简单，确实这是一篇关于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元素是个特例，因为该元素对然脱离了文档流，但是它原本所占的空间仍然占据文档流。
例如：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
position:relative;
left:50px;
top:40px;
background-color:#FF9900;
}
</style>
</head>
<body>
<p> rain-man rain-man rain-man rain-man rain-man <br />
rain-man rain-man <span>cnblog</span> rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br /></p>
</body>
</html>
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 却可以。因为它原本所占的空间仍然占据文档流。
8、Bug
Bug1:
参考网页: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html，哎这个就是IE的bug了，解决办法就是为#container设置 z-index:11 || 大于10的整数。
Bug2：
bug页面：http://www.kangchangan.cn/cnblog/floatPosition.html
解决页面：http://www.kangchangan.cn/cnblog/floatPosition2.html
相关解释已经在解决页面了。
分享到：
相关推荐
批量输出 CSS background-position 属性的定位像素值
CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。 position的四个属性值： relative absolute ...
本文向大家描述一下DIV CSS布局中的position属性的用法，position属性主要有四种属性值，任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative（相对）以及absolute（绝对）。 如何学习DIV+CSS...
第三部分：relative定位 第四部分：absolute定位 第五部分：重叠的元素--z-index属性 第六部分：脱离档流导致的问题
其中，CSS position 属性可以取5种值：position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...
主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下
定位的话，父DIV设置position:relative后，子DIV的position:absolute就会相对父DIV作绝对定位，接下来为大家介绍下CSS的position属性在DIV层中的应用
在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。最后将会介绍...
主要介绍了举例详解CSS中position属性的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下
关于CSS position属性值absolute,relative的解释.zip
主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料，position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性，感兴趣的小...
positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么...
对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓position，即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石，看似很...
div的position属性详细讲解 1.流动模型 （块元素，内联元素） 2.浮动模型 （float:） 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。...
在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现 ...
position有五个属性： static | relative | absolute | fixed | inherit，也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Position的一些细节也许你不了解，感兴趣的朋友...
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: absoluteposition: relativeposition: fixedposition: staticposition: inherit本文主要详细讨论 position 属性的...