《CSS权威指南》学习记录——定位（二）

包含块和绝对定位元素

元素绝对定位时，会从文档流中完全删除，然后相对于其包含块定位，其边界根据偏移属性放置。定位元素不会流入其他元素的内容，反之亦然。这说明，绝对定位元素可能覆盖其他元素，或被其他元素覆盖。

绝对定位元素的包含块是最近的position值不为static的祖先元素，创作人员通常会选择一个元素作为绝对定位元素的包含块，将其position值设为relative且没有偏移：





显示如下：



两个段落中的b元素都是绝对定位。第一个段落中的b元素相对于初始包含块定位，因为它的所有祖先元素的position值都是static。第二个段落设置为position：relative，因此它为其后代元素建立了一个包含块。

如果想让body元素为其所有后代建立一个包含块，可以：

body{position:relative;}

例如：



现在段落定位在文档的最前面，宽度是文档宽度的一半，并覆盖了前面的几个元素。

要注意的是，元素绝对定位时，会为其后代元素建立一个包含块。

例如：可以将一个元素绝对定位，然后将其一个子元素绝对定位：



显示如下：



如果文档可滚动，则定位元素会随着滚动。只要绝对定位元素不是固定定位元素的后代，情况都是如此。因为元素最终会相对于正常流中的一部分定位。

绝对定位元素的放置和大小

自动边偏移

元素绝对定位时，如果除bottom以外某个任意偏移属性设置为auto，会有特殊的行为。

考虑：





显示如下：



分析：对于left，元素的左边界会相对于其包含块的左边界放置；对于top，元素的顶端要相对于其未定位前本来的顶端位置（静态位置）对齐。

如果left和top也设为auto的话：



“【4】”现在就位于其静态位置。由于它已经定位，其正常流空间已经关闭，从而导致定位元素和正常流内容重叠。

非替换元素的放置和大小

一般的，元素的位置和大小主要取决于其包含块。

考虑一个定位元素的宽度和水平放置，可以表示为一个等式：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right=包含块的width

1、假设left、right、width都为auto，则：左边界处于其静态位置；width“收放得恰好合适”，即内容区宽度正好装下内容；right适当设置以保证余下的距离。





2、假设左右外边距是auto，而left、right、width不是auto，则左右外边距会设置为相等的值。





3、都有指定值，但不满足等式，此时会重置right的值。



等价于



显示为



4、如果某个外边距设置为auto，则会根据需要重置之。

5、一般的，如果只有一个属性设置为auto，会根据等式来重置之。

垂直方向上类似，不同在于：在水平布局中，如果设置为auto，则left、right可以根据其静态位置放置；但在垂直布局中，只有top可以取静态位置。另外，如果一个绝对定位元素的大小在垂直方向上过分受限，将忽略bottom。

替换元素的放置和大小

确定替换元素的位置和大小时，可按以下规则：

1、如果width设置为auto，则width的实际值由元素内容的固有宽度决定。例如，一个图像的宽度是50px，则width计算为50px。

2、在从左向右的语言中，如果left设置为auto，要把auto替换为静态位置。从右向左，相反。

3、如果left或right的值仍为auto（也就是说，在上一步中未被替换），则将margin-left或margin-right的auto设置为0。

4、如果此时margin-left和margin-right的值仍为auto，则将其置为相等。

5、在此之后，如果只剩下一个auto，则根据等式重置之。

与非替换元素一样，如果过度受限，则重置right的值。

类似的，垂直布局的规则如下：

1、height为auto的话，则为固有高度。

2、top为auto的话，则为静态位置。

3、bottom为auto的话，则将margin-top或margin-bottom的所有auto值置为0。

4、如果margin-top和margin-bottom仍为auto，则置为相等。

5、在此之后，如果只剩一个auto，则根据等式重置之。

和非替换元素一样，如果过度受限，将忽略bottom的值。

Z轴上的放置

如果两个元素试图放在同一个位置上，显然，必须有一个放在上面，这需要z-index控制。

关键字：z-index，可接受：整数值（包括负数）、auto（默认值）。应用于定位元素。无继承性。利用它，可以改变元素相互覆盖的顺序：有较高z-index值的元素会覆盖有较低z-index值的元素。例如：





显示如下：



要注意的是：一旦为一个元素指定了z-index，该元素就会建立自己的局部叠放上下文。这意味着，元素的所有后代相对于该祖先元素都有自己的叠放顺序。例如：





显示如下：



注意子元素的z-index是相对于父元素的，而不是相对于整个文档。也就是说，p#two在p#three之上，则p#two中的所有子元素（无论其z-index为多少）都在p#three之上。

固定定位

固定定位和绝对定位类似，不过其包含块是视窗。固定定位时，元素会从文档流中完全去除，不会有相对于文档中任何部分的位置。

例如：



可以得到：



但缺点在于文档的其余部分可能会被固定元素覆盖。

还可以通过固定定位在屏幕上放置一个“永久性”元素，如一个小的链接列表或页脚，如：

div#footer{position:fixed;bottom:0;width:100%;height:auto;}

相对定位

采用相对定位，要使用偏移属性移动定位元素。例如：

img{position:relative;top:-20px;left:-20px;}

则图像会向左上方移动。但是，原来占有的空间并不会消失。

考虑：

img{position:relative;top:10px;bottom:20px;}

上述声明要求图像下移10px，同时上移20px，显然矛盾。解决的方法是：一个值重置为另一个值的相反数。因此，bottom总是等于-top：

img{position:relative;top:10px;bottom:-10px;}

因此，图像下移10px。

同样的，受限时，在从左向右的语言中，right总是等于-left。