码迷,mamicode.com
首页 > Web开发 > 详细

《CSS权威指南》学习记录——定位(二)

时间:2016-06-12 02:10:38      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

包含块和绝对定位元素

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

绝对定位元素的包含块是最近的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。

《CSS权威指南》学习记录——定位(二)

标签:

原文地址:http://blog.csdn.net/gemingzhu/article/details/51627692

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!