8.10.6 固定定位

对于positioning特性，最后一个需要注意的值是fixed。这个值指定元素的内容不仅从普通流中完全移除，而且当用户向下滚动页面时框不移动。

Firefox浏览器和Safari浏览器已经提供了对固定定位的支持，Internet Explorer浏览器从IE7版本开始支持该定位方式。

下面的XHTML文档示例演示了固定定位(ch08_eg28.html)。这个示例具有多个连续的段落，以便当页面向下滚动时可以看到元素的内容固定在页面的顶部：

下面是这个示例的样式表(ch08_eg28.css)。header元素中有一个值为fixed的position特性，它被定位在浏览器窗口的左上角位置：

div.header {

position:fixed; top: 0px; left:0px;

width:100%; padding:20px; font-size:28px;

color:#ffffff; background-color:#666666;

border-style:solid; border-width:2px; border-color:#000000;} p {

width:300px; padding:5px;

color:#000000; background-color:#FFFFFF;

border-style:solid; border-color:#000000; border-width:2px;} p.one {margin-top:100px; }

最后一条规则使第一段从页面的顶部下降，以便能够看到它，但是，在当前的上下文中该规则不起作用。

图8-29给出这个固定的题头(header)元素的显示效果，即使用户向下滚动页面，该元素仍然显示。

图8-29

8.10.7 z-index特性

绝对定位元素具有重叠其他元素的趋势。当发生重叠时，默认的处理方式是第一个元素位于后面的元素下方。这称为堆叠上下文。如果具有一些绝对定位或者相对定位的框，可以使用z-index特性修改堆叠上下文来控制哪些框出现在上方。如果熟悉图无形设计程序包，则堆叠上下文类似于使用“带到顶部”和“发送到底部”功能。

z-index特性的值是一个数值，数值越大，则元素的显示就会越接近顶部。

为了更好地理解z-index特性，查看另外一个绝对定位示例一这一次仅有3个段落：

two. This will be underneath the other elements.

three. This will be at the bottom of the page.

这些段落共享公共的width. background-color. padding和border特性。然后使用绝对定位方式单独定位每个段落。因为这些段落都是重叠的，这里添加了一个z-index特性来控制哪个段落出现在顶部；该特性的值越大，则相应的段落越接近于顶部(ch08_eg29.css)：

p {

width:200px;

background-color:#ffffff;

padding:5px; margin:10px;

border-style:solid; border-color:#000000; border-width:2px;} p.one {

z-index:3;

position:absolute; left:0px; top:0px;} p.two {

z-index:1;

position:absolute; left:150px; top: 25px;} p.three {

z-index:2;

position:absolute; left:40px; top:35px;}

该实例的显示效果如图8-30所示，第二段现在出现在第一段和第三段的下方，第一段仍然位于顶部。

图8-30

8.10.8 使用float特性浮动

float特性可将元素排除在普通流之外，并且将它尽可能地放置在包含框的左边或者右边，但是位于包含框的内边距之内。该元素的垂直页边空白不会与上方或下方元素的页边空白发生折叠，如同普通流中的块框一样（因为它已经被排除在普通流之外）；浮动框将与包含框的顶部对齐。

为了指示框浮动在包含框的左边或者右边，可以设置float特性，该特性可以采用表8-21中列举的某个值。

表8-21

值

left right none inherit

目 的

框浮动在包含元素的左边，而包含元素的内容将流动到它的右边 框浮动在包含元素的右边，而包含元素的内容将流动到它的左边 框不浮动，将位于其在普通流中的位置处 框将采用与它的包含元素相同的特性

指定float特性之后，也必须设置width特性，用于指示浮动框占用包含框的宽度；否则，浮动框将自动占用100%的包含框宽度，不为环绕它的其他内容留下任何空间，从而使

其类似于块级元素。

查看下面的XHTML文档（ch08_eg30.html），并且注意第一段起始位置中的元素：

Floating

Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page. Here is paragraph one. This will be at the top of the page.

Here is paragraph two. This will be at the bottom of the page.

甚至内联的元素也能够浮动，使其脱离它的包含元素（不只是块级框能够浮动）。该元素将被排除在普通流之外，并被放置到包含元素

的右边，因为这里使用具有right值的float特性(ch08_eg30.css)。 p {

border-style:solid; border-color:#000000; border-width:2px; padding:5px;

background-color:#FFFFFF; width:500px;}

.pullQuote { float:right; border-style:solid;

border-width:1px; }

在图8-31中可以看到，class属性值为pulIQuote的元素的内容位于页面的右边，而剩余的段落流动到左边，然后位于该元素的下方。

width:150px;

padding:5px;

margin:5px;

图8-31

在下一章中讨论页面布局时将介绍更多float特性工作原理的示例。

8.10.9 clear特性

当使用浮动框时，clear特性特别有用。如图8-31所示，内容可以围绕浮动元素进行布局；但是，开发人员可能不希望发生这种情况——他们可能宁愿浮动元素的左边没有任何内容，并且将包围内容推到浮动元素的下方。clear特性可以完成该功能，表8-22中给出了这个特性能够采用的值。 表8-22

值

left right both none

目 的

具有clear特性的元素的内容将从浮动元素的左边清除（它不会出现在浮动元素的左边） 具有clear特性的元素的内容将从浮动元素的右边清除（它不会出现在浮动元素的右边） 具有clear特性的元素的内容将从浮动元素的两边清除（它不会出现在浮动元素的任意一边） 允许在任意一边浮动

查看下面的示例(ch08_eg31.html)，它与上面的示例稍有不同，因为这一次PullQuote位于元素而不是元素中，并且它不包含在段落中：

Floating

Here is paragraph one. This paragraph will get pushed underneath the floating element.

下面的样式表将把PullQuote元素浮动到右边，但是段落元素使用clear特性阻止任何浮动内容出现在它的右边(ch08_eg31.css):

p { clear:right;

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库Web编程入门经典 第8章 更多层叠样式表(7)在线全文阅读。