CSS基本概念 1.5定位规则

虽然CSS开始元素样式以正常的文档流的方法，很显然作者想做更多的自己的布局。以此方法来抵消自己正常的元素布局，用CSS的方法替代框架有一些要求,等等。作为答复，CSS2添加了定位规则。其实仅有三种定位：static（静态的）,relative（相对的）和absolute（绝对的）。静态定位是正常状态的——换句话说，静态定位实际上是“不定位”。相对定位元素替换了他们正常文档位置的方式，然而绝对定位元素在固定的一些点上放置，并且永远不会改变他们的位置。

每个被定位元素放在它的包含块里。这个块可以看作是被定位元素的父元素。每个被定位的元素拥有独一无二的包含块。在下面的部分定义这个块需要说明。

相对定位

相对定位在它执行时是相当简单的。一个相对定位元素通常将从正常的文档流中占据的位置偏移，并且保持它离开后原来的空间。这个定位元素很可能在操作中覆盖其他元素（或元素的内容），或者被其他的元素覆盖，可以依靠z-index属性的值来解决以上问题。有必要的话，在作者创立的样式时能够避免这种情况。包含块
一个相对定位元素的包含块盒子将不脱离正常的文档流（就像，它没有定位一样）。

偏移量

它的距离包含了相对定位元素top,right,bottom和left属性的集合。正值将推动元素靠近它包含块的内容区，负值将推动它离开。因此，一个正的top值将推动元素向下，当一个正的bottom值将向上移动。负值将向相反的方向移动。同样的，一个正的left值，将元素向右推动，一个正的right值，将元素向它的左边移动，用负值将有相反的效果。在一些情况下属性的值会相互冲突。例如，在元素中设置top和bottom两者方法都为10px应该两者都被向上和向下移动10像素，哪一个不合理。因此，使用下面的规则：
1.如果给予top和bottom两个属性一个明确的值，那么bottom的值将被忽略。
2.如果给予left和right两个属性一个明确的值，按照从left到right的顺序right的值将被忽略。按照从right到left的顺序left的值将被忽略。

绝对定位

绝对定位在position属性中实际上包含两个值。这些值分别是absolute和fixed。在任何情况下它们两个唯一的不同地方在于包含块；此外，定义包含块的规则是相同的。
上述两个情况，定位元素彻底的脱离了正常的文档流。这个定位元素很可能在操作中覆盖其他元素（或元素的内容），或者被其他的元素覆盖，可以依靠z-index属性的值来解决以上问题。有必要的话，在作者创立的样式时能够避免这种情况。

包含块

在position:absolute的情况下，被定位元素的包含块靠近的父元素除了stacic还可以加入position属性的值。如果没有父元素，这时包含块把文档作为父元素。在HTML和XHTML中，这个父元素实际是HTML元素，不是BODY元素。这个包含块将从文档的左上角出发，设在BODY元素的外边距上。绝对定位元素会随着剩余文档发生滚动，就像它们已经被完全的固定在文档自身上。

在position:fixed的情况下，包含块是视野窗口。在浏览网页时，视野窗口是浏览器的显示窗口，固定定位元素将不随文档滚动并且与框架的方法类似。在像打印的分页媒体中，每一页都建立自己的视野窗口，所以固定定位的元素将出现在每一页同样位置的视野窗口上。

水平尺寸

一个绝对定位元素的水平尺寸包含了left,margin-left,border-left-width,padding-left,width,padding-right,border-right-width,margin-right和right属性。这些属性的值，同时相加，可能等于包含块的宽度。负的外边距可能使元素超出包含块。

有一些规则支配调节它们的属性值，对于不可替代元素(例如，段落)的规则如下所述：
1.在从左到右的顺序中如果left属性被设置为auto,这个值会被在正常文档流中元素左边界的同一位置重置（就像是，它没有被定位）。如果想要包含块的左边界指向左边，那么将要把left设置为负值。按照从右到左的顺序，right属性的规则被应用，而不是left。
2.如果width属性被设置为auto,那么auto值把left和right属性的值重置为0。它将标记元素并且它的外边距和包含块是等宽的。
3.如果left,right或width被设置为auto,那么auto值把margin-left和margin-righ的值重置为0，元素将会移动左或右的外边距。
4.如果把margin-left和margin-right两者都设置为auto，那么相当于它们设置为相等的宽度。如果明确的设置元素的宽度，那么元素在它的包含块之内将实现“居中”的效果。（如果没有明确的设置元素的宽度，那么它应当设为auto的规则将生效，并且设置两者的margin为0。）
5.如果只有一个值为auto属性（例如，设置为上述的属性规则），那么它的长度被重置为必须满足计算的水平尺寸等式。
6.如果所有的尺寸都被设置为明确的长度，并且它们的长度没有增加包含块的宽度，那么按照从左到右的顺序left属性的值被设置为与水平尺寸等式相等是它们将重合。按照从右到左的顺序，对它的右属性进行设置。
对于已经被绝对定位的替代元素（例如，images），它的规则与上述的两种方法不一样。一，如果width属性的值设置auto,用来替代元素原有的宽度。二，由于它的width属性的值从来不会是auto，（上述列表）第三条规则是无效的。

此外，用min-width和max-width属性设置元素宽度的界限。它的使用有下述规则：
1.它的宽度是正常计算的（理解以前的规则）
2.如果给予min-width属性的值大于max-width属性的值,max-width属性的值被重置为min-width属性的值。
3.如果元素计算的宽度大于max-width，或者小于min-width，那么width属性的值被适当的调整来与之（max-width或min-width）相匹配。
每个用户代理对于自己min-width的值有不同的定义，因此用户代理可以在内部值下自由的设置min-width的值。

垂直尺寸

一个绝对定位元素的垂直尺寸包含了top,margin-top,border-top-width,padding-top,height,padding-bottom,border-bottom-width,margin-bottom和bottom属性。这些属性的值，同时相加，可能等于包含块的高度。负的外边距可能使元素超出包含块。
有一些规则支配调节它们的属性值，对于不可替代元素(例如，段落)的规则从先前的CSS2开始：
1.如果top属性被设置为auto,这个值会被在正常文档流中元素顶部边界的同一位置重置（就像是，它没有被定位）。如果想要包含块的顶部边界指向顶部，那么将要把top设置为负值。
2.如果height和bottom属性两者被设置为auto,那么bottom属性的值被重置为0。
3.如果bottom或height属性中两者任意一个被设置为auto，那么任意一个auto值把margin-top和margin-bottom重置为0。在元素中它将移动任意的top或bottom的外边距。
4.如果margin-top和margin-bottom属性两者被设置为auto,那么它们被设置为与高度相等。如果元素的高度被设置为一个明确的长度，那么元素在它的包含块之内将实现“居中”的效果。（如果没有明确的设置元素的高度，那么它应当设为auto的规则将生效，并且设置两者的margin为0。）
5.如果只有一个值为auto属性（例如，设置为上述的属性规则），那么它的长度被重置为必须满足计算的水平尺寸等式。
6.如果所有的尺寸都被设置为明确的长度，并且它们的长度没有增加包含块的高度，那么bottom属性的值被设置为与水平尺寸等式相等是它们将重合。
对于已经被绝对定位的替代元素（例如，images），它的规则与上述的两种方法不一样。一，如果height属性的值设置auto,用来替代元素原有的宽度。二，由于它的height属性的值从来不会是auto，（上述列表）第三条规则是无效的。

此外，用min-height和max-height属性设置元素宽度的界限。它的使用有下述规则：
1.它的高度是正常计算的（理解以前的规则）
2.如果给予min-width属性的值大于max-height属性的值,max-height属性的值被重置为min-width属性的值。
3.如果元素计算的宽度大于max-height，或者小于min-height，那么height属性的值被适当的调整来与之（max-height或min-height）相匹配。
每个用户代理对于自己min-height的值有不同的定义，因此用户代理可以在内部值下自由的设置min-height的值。
在这些规则下的标签，它能够设置一个复合属性将影响一个元素正好包含它自己内容的足够的高度，并且不会更高（或短）。它有时产生“收紧包装”的效果，并且在CSS2中这个严重的缺陷经常被忽略。为了纠正它的情况，有人已经提议通过把height值改为auto使得"元素拥有足够的高度包含它自己的内容"。虽然这个建议没有被W3C正式的采用，但是我们所知道的已经兼容的用户代理（浏览器）都支持绝对定位。

作为一个基本的例子，假设一个绝对定位元素的margin和padding两者的宽度都被设置为10px,它的border宽度为0，并且定位元素中的height值为auto。进一步假设top被设置为0，bottom被设置为100px。现在，进一步假设它的内容高只有260px。事实上它将设置height为260px。为了满足等于垂直尺寸的计算这个方法定位元素的内容将被精确为400px高。如果定位元素内容实际上为475px高，那么bottom将被重置为175px。