别再纠结了！尽管把你的烦恼交给我们吧，我们会将问题转化为一整套解决方案提供给你！方案的前期咨询根本不需你花一分钱。还不马上咨询？
或许一套通用软件就能让你从烦恼中解脱出来，那就先到我们的软件产品仓库中选一款吧！我们还可以为你提供现有软件的扩展定制，即客户化定制。
购买软件与汉堡包不同，软件产品和软件实施相结合才能发挥作用！没有良好的软件实施，必败！而采用我们的方案或产品，免费获得软件实施支持。
坚持用心建站！ 您只需告知所需要到达的终点，我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护，享受全程的贴心服务。
何必专门招人负责网站维护呢？你可能反驳招人能兼干其他工作，但是这样就不够专注。而我们提供的网站后期维护更专业，更专注，更划算。37. CSS 的绝对和固定定位
- 详细资料
- 发布于 2012年9月18日
- 点击数：3997
引言
现在该将你的注意力转向第二对position属性值——absolute和fixed了。第一对属性值——static和relative——是密切相关的，这两个属性值我们已经在
上一篇文章中非常详细地讨论过了。
绝对定位的元素不再包含于文件流之中。这意味着它们对自己的父元素或源代码中位于自己后面的其它元素完全没有任何影响。因此，一个绝对定位的元素将重叠在其它页面内容上，除非你采取行动来阻止它。当然，有些时候，这种重叠正是你想要的，但你必须小心，以确保自己能得到想要的布局。
固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对于视窗/浏览器窗口而固定，而不是相对于其包含元素；即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一样的地方。
在本文中，我们将会看到用到absolute和fixed的一些实际例子，还会研究某些浏览器支持缺陷，以及对z-index概念进行探索。
本文结构如下：
在讨论这些内容之前，我要先讲讲一个非常重要的前提概念——包含区块。
包含区块
在谈到绝对定位时，有一个非常重要的概念，这就是包含块：与绝对定位盒模型的位置和大小相关的块状盒模型。
对于静态盒模型和相对定位盒模型来说，其包含区块就是最近的块级先祖——也就是父元素。然而对绝对定位的元素来说，这个概念要稍微复杂一点。在这种情况下一个元素的包含区块是其最近的已定位先祖。我用“已定位”这个词的意思是指position属性已经设置为relative, absolute或fixed的元素——也就是说，除了标准静态元素之外的其它所有元素。
因此，通过对一个元素设置position:relative，你就可以使它成为任何绝对定位的派生元素（子元素）的包含区块，无论这些元素在文件层级中是处在相对定位元素的下一层，还是处在文件层级的更下层。
如果一个绝对定位的元素没有已定位的祖先元素，那么它的包含区块就是所谓的“源容器区块”，实际上就等同于html元素。当你在屏幕上浏览网页时，该包含区块就是浏览器窗口；在打印网页时，就是页面边界。
对于固定定位元素来说这个概念要稍微有点区别——它们的包含区块始终是源容器区块。
我们用一串简单步骤来总结一下——为了找出设置了position:absolute的元素的包含区块，你只需按照下面的步骤进行：
- 看看这个绝对定位元素的父元素——它的
position属性值是relative,absolute或fixed之中的一个吗？ - 如果是，那它就是你要找的包含区块。
- 若不是，再查看该父元素的父元素，重复第一步的操作，直到你找到了该元素的包含区块，或者遍历完所有祖先元素。
- 如果你已经上溯到
html元素，还是没有找到任何已定位的祖先元素，那么该元素的包含区块就是html元素。
绝对定位
由于相对定位是绝对定位的特殊形式，因此我们稍后再讲它，现在先来看看更广义的情况。除非另作说明，在本篇文章中，凡用到“绝对定位的”这个词的地方，都是指position:fixed的元素，以及position:absolute的元素。
指定位置
你已经了解到，在相对定位中可以用top, right, bottom和left属性来指定盒模型的位置。虽然在绝对定位中也是用同样的属性来指定一个绝对定位的元素的位置，但是它们的使用方法完全不同。
对于一个相对定位的元素来说，这四个属性指定了移动所生成的盒模型的相对距离。别忘了在相对定位情况下它们可以互为补充，比如说top:1em和bottom:-1em就是一回事，同时给一个元素指定top和bottom（或left和right）没什么意义，因为这两个属性值之中的一个会被忽略掉。
但在绝对定位情况下这些概念就不管用了。此时，四个属性可以同时用起来，来指定被定位的元素的四边到包含区块的对应边的距离。你也可以指定绝对定位的盒模型的某一个角的位置——比方说通过top和left来指定——然后再通过width和height（如果你想让它收缩包围来适应自身内容的话，也可以不指定width和height）来指定该盒模型的大小。
微软的IE6及更早版本的浏览器不支持同时指定四边距离的方法，但能支持先指定一角再指定大小的方法。
/* This method works in IE6 */
#foo {
position: absolute;
top: 3em;
left: 0;
width: 30em;
height: 20em;
}
/* This method doesn't work in IE6 */
#foo {
position: absolute;
top: 3em;
right: 0;
bottom: 3em;
left: 0;
}需要记住的是，top, right, bottom和left属性的值指定的是该元素的边到其包含区块的对应边的距离。而不是像坐标系中那样，每个值都是相对于同一个原点的距离。比如说，right:2em就是指绝对定位的元素的右边到其包含区块的右边的距离是2em。
当你用到绝对定位的时候，最要紧的就是要弄清楚你的包含区块是哪个。所以将你的包含区块设置为position:relative非常管用，即使你实际上并不想移动该盒模型的位置。这样你就可以将一个元素变成其绝对定位的派生元素的包含区块了——而这会带给你更多的支配权。
为了搞清楚绝对定位是怎样工作的，我们来看一个例子。
-
将下面代码拷到你的文本编辑器中，另存为absolute.html。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Absolute Positioning</title> <link rel="stylesheet" type="text/css" href="/absolute.css"> </head> <body> <div id="outer"> <div id="inner"></div> </div> </body> </html> -
接下来，新建一个文件，把下面代码拷进去，另存为absolute.css。
html, body { margin: 0; padding: 0; } #outer { margin: 5em; border: 1px solid #f00; } #inner { width: 6em; height: 4em; background-color: #999; } -
保存这两个文件，将HTML文档载入你的浏览器中。你将看到一个灰色的矩形，它的周围还有稍微宽一点的红色边框。
#inner元素的宽度和高度都是指定的，它的背景颜色是灰色的。#outer元素是#inner元素结构上的父元素，那个红色边框就是它的。在它周围还有5em的边距，用来将其从浏览器窗口边缘移开，好让我们更清楚地看到这段代码的效果。目前为止还没什么好惊奇的，对吧？
#outer元素的高度是由其子元素（#inner）决定的，而宽度是由水平边距决定的。 -
如果我们把
#inner设成绝对定位又会怎么样？等着瞧！将下面高亮的声明加到#inner的规则去中：#inner { width: 6em; height: 4em; background-color: #999; position: absolute; } -
保存，重新加载页面。现在看起来可不像是灰色矩形周围的红色边框了，更像是一个粗粗的顶部边框。而且灰色的方块根本没有移动！这跟你的预期一样吗？
这里有两个有趣的现象。首先，因为
#inner被设成了绝对定位，它就完全脱离了文件流。这就意味着其父元素，也就是#outer，在常规文件流中不再有子元素了，因此其高度塌缩成了零。那个看起来有2px宽的线条其实只是零高度元素外面的1px边框——你看到的只是顶部边框和底部边框，而它们中间什么也没有。第二件有意思的事情是，绝对定位的盒模型并没有发生移动。
top,right,bottom和left属性的默认值是auto，这就意味着这个绝对定位的元素的位置仍然跟没有定位时完全一样。由于该元素不再包含于文件流中，它就会重叠在常规文件流中原来位于它后面的所有元素上。这实在是非常有用——如果你想让某个生成的盒模型只朝一个方向移动的话。比如说，在一个CSS编写的下拉菜单中，“下拉”面板的绝对定位就可以只指定
top属性。这样它们就可以沿着X轴显示在你想要的坐标位置上（跟其父元素的X坐标一样）。 -
接下来，我们为
#outer元素设置一个高度，让它重新成为一个矩形，并将#inner元素移到旁边去。将下面高亮的代码行添加到CSS规则中：#outer { margin: 5em; border: 1px solid #f00; height: 4em; } #inner { width: 6em; height: 4em; background-color: #999; position: absolute; left: 1em; } -
保存并重新加载页面，你将看到一些变化。
#outer元素现在又成了矩形了，因为你为它设置了高度。#inner元素移到了旁边，但却不是你所预期的地方。它的左边缘并没有距离父元素的左边框1em，反倒是离浏览器窗口的左边缘1em！就像前面解释过的那样，这个问题的原因在于，
#inner并没有已定位的祖先元素，因此它的包含区块就是源容器区块。如果你指定了除auto以外的属性值，那么它相对的就是包含区块的对应边。如果你设置了left:1em，#inner的左边缘就会距离浏览器窗口左边缘1em。 -
如果你想把它变成距离其父元素的左边缘1em，就必须将该元素的父元素变成它的包含区块。为了达到这个目的，你就得用到我在本文前面提到的小伎俩——将父区块设为相对定位。将下面高亮的代码行添加到
#outer规则：#outer { margin: 5em; border: 1px solid #f00; height: 4em; position: relative; } -
保存并重新加载——你瞧！灰色的方块现在距离其父元素的左边框1em了。在
#outer规则中设置position:relative使得该元素成为已定位元素，并且将它变成了它自身所有绝对定位的派生元素的包含区块。为#inner设置的left:1em现在是从#outer的左边缘算起，而不是从浏览器窗口的左边缘算起。
指定大小
如果你没有指定其大小，绝对定位的元素就会收缩包围来适应自己所包含的内容。你可以通过对left和right属性，或者width属性进行设置来指定元素的宽度，而高度可以通过top和bottom属性，或height属性来指定。
这六个属性都可以用百分比来指定。从本质上来讲，百分比就是指与其它元素的比例。在本例中，百分比就是指与包含区块的大小的比例。
对于绝对定位的元素来说，left, right和width属性的百分比值与包含区块的宽度相关。top, bottom和height属性的百分比值则是与包含区块的高度相关。
在IE6及更早版本的浏览器，以及opera8和更早的版本中，把百分比计算完全搞错了，它们用的是父区块的大小来进行计算。我们用另一个例子来看看这种错误会造成什么样的差别。
-
首先用百分比形式的属性值来指定
#inner元素的大小——将#inner规则修改成下面的样子：#inner { width: 50%; height: 50%; background-color: #999; position: absolute; left: 1em; } -
保存，重新加载，你会看到灰色方块变宽了，也变短了（至少在最新的浏览器上是这样）。包含区块仍然是
#outer没有变，因为它设置了position:relative。#inner元素的宽度是#outer宽度的一半，高度也是#outer高度的一半。 -
我们再来把视窗改成包含区块，看看有什么不同！对
#outer做如下改动：#outer { margin: 5em; border: 1px solid #f00; height: 4em; position: static; } -
保存，刷新——大不一样了，是吧？灰色方块现在有浏览器窗口的一半那么宽了。
正如你看到的一样，搞清楚你的包含区块是哪一个，这是绝对必要的！
第三维度——z-index
我们会很自然地把网页看作是二维的。现在的技术还没有发展到能使3D显示随处可见的地步，所以我们只能接受只有宽度和高度，以及仿3D效果的现状。但CSS渲染实际上是在三个维度上进行的！这并不是说你可以让某个元素悬浮在显示器的前方——现在还不能这样——而是说已定位的元素还有其它很实用的用途。
网页上最主要的两个坐标轴就是水平方向的X轴和垂直方向的Y轴。这个坐标系的原点位于窗口的左上角，在那里X和Y值都为0.
但是Z轴也是存在的，我们可以将它想象成垂直于显示器的表面（在打印时就是垂直于纸面）。Z值较高的元素将位于Z值较低的元素的“前面”。Z值也可以是负数，代表元素位于某个参照点的“后面”（我马上就来讲这种参照点）。
在我们继续进行之前，我得提醒你一下，这是CSS中最复杂的概念之一，所以如果你第一遍没有读懂的话也用不着灰心。
已定位的元素（包括相对定位元素）是在一种所谓的堆叠环境之中渲染的。在同一个堆叠环境中的元素在Z轴上的参照点是相同的。下面我会更详细地讲解这一点。你可以通过z-index属性来改变一个已定位的元素在Z轴上的位置（也叫做层叠级别）。该属性的值可以是整数（也可以是负整数），也可以是auto或inherit两个关键字之一。默认的属性值是auto，表示该元素与自己的父元素的层叠级别相同。
Y必须要注意，你只能指定元素在Z轴上的索引位置。你不能让一个元素出现在另一个元素后面19像素，或在它前面5厘米的地方。你可以把这些元素想象成一副牌，你可以洗牌作弊，并且使黑桃A位于方块三的上面——每张纸牌都有自己的层叠级别，或者说Z index.
如果你将z-index指定为一个正整数，就是赋给这个元素一个层叠级别，表示在同一堆叠环境之中，它会位于比它的层叠级别低的其它元素的“前面”。z-index值为0（零）的意义与auto相同，但它们之间存在差异，我马上就会谈到这一点。如果z-index的值为负整数，就表示该元素的层叠级别在其父元素的层叠级别“之后”。
如果同一堆叠环境之中的两个元素的层叠级别相同，源代码中较晚出场的那个元素就会位于较早出现的那个元素之上。
实际上一个堆叠环境可以有多达七个层级，不过别担心——你不必处理一个堆叠环境的全部七个层级。同一个堆叠环境中元素（所有元素，而不仅仅是已定位的元素）的渲染顺序如下，下面列表中越靠前的元素在渲染时越排在后面：
- 该堆叠环境中元素的背景和边框
- 层叠级别为负数的已定位的派生元素
- 常规文件流中的块级派生元素
- 浮动的派生元素
- 常规文件流中的内联派生元素
- 层叠级别为
auto或0（零）的已定位的派生元素 - 层叠级别为正数的已定位的派生元素
加了高亮的条目代表那些我们可以通过z-index属性来更改其层叠级别的元素。
这整个概念实在是难以理解，因此我们实际动手来做做实验，以便弄清楚Z-index。
-
首先将下面高亮的代码行添加到你那小小的实验文档中：
<body> <div id="outer"> <div id="inner"></div> <div id="second"></div> </div> </body> -
然后再改改你的CSS，让
#outer成为包含区块，并且将#inner的大小用非百分比来表示。我们把#outer设高一点，以便留出更多的空间来进行实验。按照下面高亮的代码行来改你的CSS规则：#outer { margin: 5em; border: 1px solid #f00; height: 8em; position: relative; } #inner { width: 5em; height: 5em; background-color: #999; position: absolute; left: 1em; } -
A为
#second元素添加规则：#second { width: 5em; height: 5em; background-color: #00f; position: absolute; top: 1em; left: 2em; } -
保存，刷新，你会看到一个鲜蓝色方块重叠在灰色方块上。这两个盒模型具有相同的层叠级别（
auto，也就是初始值，即层叠级别为0），但蓝色的盒模型被渲染为处于灰色盒模型的前面，因为它在源代码中出现得更晚。你可以也让灰色盒模型跑到蓝色盒模型的前面去，只需要赋给它正层叠级别就可以了。只需要将z index值设成大于0就可以了——没必要那么过火地给它设一个10000之类的值。将下面高亮的代码行添加到#inner规则：#inner { width: 5em; height: 5em; background-color: #999; position: absolute; left: 1em; z-index: 1; } -
保存，重新加载页面，现在灰色方块跑到蓝色方块前面去了。
局部堆叠环境
本章接下来的部分将讨论局部堆叠环境。除非你打算用绝对定位来做非常高级的效果，在平常的设计工作中你也许根本不会碰到这个概念，但是为了完备起见，我还是会讲一讲它。如果你不想了解的话可以自行跳过这一部分。
每个z-index值为整数的元素都会建立一个新的，“局部”堆叠环境，在这种堆叠环境中，该元素自身的层叠级别为0。这就是我上面说过的z-index: auto和z-index: 0之间的差别。在这两个值之中，前者不会建立新的堆叠环境，但后者会。
如果某个元素建立了局部堆叠环境，它的已定位的派生元素的层叠级别就只能在该局部环境中起作用了。这些派生元素可以相对于彼此重新堆叠，也可以相对于其父元素重新堆叠，但不能相对于其父元素的同级元素重新堆叠。就像是派生元素被圈在了父元素的“笼子”里一样，它们不能从其中逸出。派生元素可以在这个笼子里上下移动，但不能跑到笼子外面去。父元素和其子元素将在包围该父元素的堆叠环境中成为一个不可分割的单元。
你可以想象自己正在整理文书，以便将它们交到为你报税的会计师手中。你将费用报表，收据，确认订单以及类似的东西一张重一张地叠成一叠——为了让你的会计师轻松一点儿，你将每一类的文书分别装在不同的信封里。
局部堆叠环境与这种信封类似。它将相关的元素聚在一起，并防止其它元素插入到它们中间。你可以对每个信封内的内容进行排序，想怎么排都可以，但是这种排列顺序只限于每个信封内部，对整叠文书没有影响。现在你那一堆文件中包含了单张文书的组合（层叠级别为auto的元素），以及信封（层叠级别为整数的元素）。正层叠级别的信封在这叠文书的上面，而负层叠级别的信封在一叠文书的下面。
每当你给某个元素的z-index属性赋以整数值，你就创建了一个包含该元素及其子元素的“信封”。
我们来看看局部堆叠环境是怎样工作的。这看起来可能会让人有点晕，但其实跟前面已经学过的那些内容没有太大的差别。如果你照着这个例子来操作，就可以体验一下局部堆叠环境是怎样运作的了。
-
首先给两个inner元素添加一些规则——将下面高亮的代码行添加到你的HTML文档中：
<div id="inner"> <span></span> </div> <div id="second"> <span></span> </div> -
添加一条CSS规则，使其可以同时应用到两个
span元素上：span { position: absolute; top: 2em; left: 2em; width: 3em; height: 3em; }这段代码将
span元素设为绝对定位，并指定了它们的位置和大小。但是请等一等——span元素是内联元素——你怎么能给内联元素指定大小呢？答案就是绝对定位的元素就像浮动元素一样，会自动生成区块盒模型。这里我们指定的位置是相对于每个
span元素的包含区块的。由于两个span元素的父元素都是绝对定位的div元素，这两个父元素就扮演了包含区块的角色。 -
现在我们给
span元素添加一下颜色，以便看清楚它们的显示位置，将下面规则添加到你的样式表中：#inner span { background-color: #ff0; } #second span { background-color: #0ff; } -
保存，刷新，你将在那个较大的灰色方块的右下角看到一个黄色方块，而较大的蓝色方块的右下角还有一个青色方块。灰色方块和黄色方块位于蓝色方块和青色方块的前面，因为灰色方块的设置是
z-index:1。 -
如果你想让青色方块跑到所有方块的前面去，该怎么办呢？你只需要将它的层叠级别设得比灰色方块高就行了。实际上将它的层叠级别设成跟灰色方块一样就够了，因为青色方块在标记中出现得更晚。我们来试一试——对你的CSS做如下改动：
#second span { background-color: #0ff; z-index: 1; } -
保存并重新加载页面。如果你的浏览器对CSS规范的支持到位的话，青色方块现在就应该处在最前面了。
灰色方块的设置是
z-index:1，这意味着它将建立一个局部堆叠环境。也就是说，你已经创建了一个 “信封”，并且将灰色方块和它的黄色子方块放了进去。
还没搞清楚吗？那我们就通过下一个实验来进一步地讲解这个问题。
-
对黄色的方块设置更高的层叠级别，让它跑到最前面去——对你的CSS做如下改动：
#inner span { background-color: #ff0; z-index: 4; } -
保存并重新加载页面，你会看到……没有任何改变！我们为黄色方块设置的层叠级别只有在灰色方块所建立的堆叠环境中才能有效——黄色方块与它的灰色父元素位于同一个信封之中。之所以你能将青色方块置于最前面，是因为它的父元素（蓝色方块）并没有建立自己的局部堆叠环境——它被隐式设置为
z-index:auto. 这个蓝色方块就相当于文书堆中的单张文书。黄色和青色方块实际上是装在它们自己的小信封（它们的层叠级别是整数，因此它们建立了自己的局部堆叠环境）里的。 -
如果你让蓝色方块也建立自己的局部堆叠环境，你就不能将青色方块移到最前面去了，除非你同时将它的父元素（蓝色方块）也移到最前面去。我们可以来试一试——对你的CSS做如下改动：
#inner { ... z-index: 2; } #second { ... z-index: 1; } #second span { ... z-index: 3; } -
保存并重新加载页面。现在灰色和蓝色方块都建立了自己的局部堆叠环境，给我们整了两个信封。在这个元素堆栈的最下面是层叠级别为1的信封，其中还包括两个内部信封（蓝色方块和青色方块）。元素堆栈的最上面是层叠级别为2的信封，其中还有两个内部信封（灰色和黄色方块）。在第一个信封里，蓝色方块的局部层叠级别为0，因此它显示在青色方块的后面，因为青色方块的局部层叠级别为3。在第二个信封里，灰色方块的局部层叠级别为0，因此它显示在黄色方块的后面，因为黄色方块的局部层叠级别为4。
图1显示了四个盒模型和两个局部堆叠环境沿Z轴方向的侧视图。
图1：不同的堆叠环境的展示。“2”中的元素将始终显示在“1”中所有元素的前面。在每个堆叠环境中，z-index值高的元素将出现在z-index值低的元素的前面。如果两个元素的z-index值相同，标记中出现得较晚的那个元素的位置将最靠前。
这一部分的内容可能是非常难以理解的，尤其是对CSS新手来说。重点是，如果你想要改变各种元素的层叠级别的话，就必须要了解你的堆叠环境。如果某个元素属于一个局部堆叠环境的话，你就只能改变它在该局部堆叠环境中的Z轴位置。一个局部堆叠环境中的元素是不能插入到另一个局部堆叠环境的元素中去的。
不过，幸运的是，你很少会碰到这些问题。对优良的布局来说，需要改动z-index值的情况是很少发生的，而且就算需要作改动，通常这种情况也只是发生在同一个堆叠环境之中。
固定定位
一个设置了position:fixed的元素是相对于视窗固定的。就算页面文档发生了滚动，它也会一直呆在相同的地方。如果设置media="print"，固定定位的元素就会重复出现在每一页打印资料上相同的地方。
值得注意的是，IE6及更早版本的浏览器压根不支持固定定位。如果你的浏览器属于上述系列的话，你将无法看到这一部分的例子的效果。
尽管position:absolute的元素的位置和大小是取决于其包含区块的，position:fixed的元素的位置和大小却始终是取决于源容器区块的。源容器区块一般是视窗：也就是浏览器窗口或一张纸的页框架。
为了说明这一点，在下面的例子中我们会将一个元素设置为固定定位。为了使页面出现滚动条，我们将另一个元素的高度设得非常大，以便我们看到固定定位的效果。
-
对你的CSS做如下改动：
#inner { width: 5em; height: 5em; background-color: #999; position: fixed; top: 1em; left: 1em; } #second width: 5em; height: 150em; background-color: #00f; position: absolute; top: 1em; left: 2em; } -
保存，刷新。如果你的窗口中并没有出现垂直滚动条，那就再把
#second的height值设大一点。（你到底用的什么巨型浏览器啊？）长长的蓝色方块伸出了浏览器窗口底部。向下滚动页面，留心看左上角的灰色方块。元素现在固定定位在距浏览器窗口顶部和左边缘各1em的地方，因此在你滚动窗口的时候，灰色方块仍然位于屏幕上同样的地方。
总结
绝对定位的元素不再包含于文件流之中。除非你为它们腾出空间，它们就会重叠在其它页面内容上。如果某个容器的所有子元素都是绝对定位的，父元素的高度就会塌缩为零。
绝对定位的元素的定位与其包含区块相关，这里说的包含区块就是指该元素最近的已定位的祖先元素。如果已定位的祖先元素不存在，那么其包含区块就是视窗。
固定定位的元素是相对于视窗固定的——它们的包含区块就是视窗。在屏幕上浏览的时候，它们总是显示在浏览器窗口内的同一个位置上；在打印的时候，它们会出现在每一页纸上。
绝对定位的元素每条边的位置可以通过top, right, bottom和left属性来指定。每个属性值指定的是它所代表的边到该元素的包含区块的对应边的距离。
所有已定位的元素都是在一个堆叠环境中按照某个层叠级别来渲染的。你可以通过z-index属性来改变一个已定位的元素的层叠级别。如果一个元素的z-index设置为整数值的话，该元素就会建立一个包含了自己的子元素的局部堆叠环境。
练习题
-
撤消对固定定位示例所做的改动，改变四个绝对定位的方块的堆叠顺序，使灰色方块位于最后面，然后依次是蓝色，黄色和青色方块。（建议：删除所有的
z-index声明，然后再重新开始。） -
通过设置
top:-1em和left:8em将黄色方块向右上方移动。然后使它显示在#outer元素的后面，从而使红色边框横穿黄色方块。 -
用绝对定位来重做我们在静态定位和相对定位一文中创建的三栏式布局。由于在这里不可能做出全长度页脚，你可以删掉
#footer元素，但不准改变标记中的其它任何东西（除了连到样式表的链接以外）。 -
修改前一个练习中的布局，对导航栏实用固定定位。为了实现这个效果，你得删除
body元素的自动水平边距。在主要内容栏和或侧边栏中添加足够多的内容来制造出滚动条，这样你就可以检验一下固定定位是否实现了。
