CSS设计:绝对位置 vs. 相对位置

什么使用嵌套的层?

最近一个好奇的读者问起了关于 Adaptive Path 的网站重构:“对于主导航栏的设计,我一直很困惑,为什么把一个具有绝对位置(absolute)的层嵌套在一个具有相对位置(relative)的层中?”

一个简单的答案是:因为我想要使标题和导航栏具有最适宜的灵活性,并且无论文本大小如何变化,都能保持导航栏与LOGO之间的距离不变

这是战略性(strategic)的答案,它给出了基本原理。但是,我推断他也正在寻找一个战术性(tactical)的答案。为了更彻底的回答他的问题,我将退一步,用我自己的语言来解释绝对位置如何在样CSS中工作,并通过举例来演示与Adaptive Path不同的设计效果,然后我们在回来讨论AP的导航栏。

容器块(布置上下文)

将具有绝对位置的元素嵌套于具有相对位置的元素,这是一种相当常用的技术。更普遍的是,我们可以看到相反的状况:将一个具有相对位置的元素包在一个具有绝对位置的元素之外。

依照CSS2的说明,一个具有绝对位置的元素(absolute-positioned element),其位置是由它所在的容器块(containing block)来决定的。只要元素的位置值(position value)被设定为相对(relative)绝对(absolute),或者固定(fixed)[只要不是静态(static)],那么该元素就将被视为是已经定位的 (positioned)元素。“静态”是位置属性中一个可能的取值。同时,对于那些没有被指定位置的元素,它也是默认值。静态基本上意味这这一元素的位置是不可修改的,并和文档中的其它的同胞元素(sibling element)以及容器块以预期的正常流动(normal flow)状态显示。

如果一个具有绝对位置的元素未处于其它容器块中,(当没有已定位的父元素时)那么它的位置即是相对于页面边界的(称为初始容器块)。因此,一个按照如下规则设置的元素:

#topleft {
position:absolute;
top:0;
left:0;
}

将被置于页面的左上角。然而,所有已经定位的父元素会为它们的子元素设定新的容器块。如果一个父元素已被定位,那么它的所有子元素的的定位将会以父元素(新的容器块)的边界来重置。因此,上面的这个规则中的盒偏移(box offsets)会使得这一#topleft元素置于父辈元素的左上角,而不是页面的左上角。

还是很迷惑?对我来说,它也好像是在胡言乱语。下面,我将举一个普通的例子帮助你掌握它!

动态定位

对于stopdesign.com,(在写这篇文章的时候)我在右侧栏目(#subcol)上使用了绝对位置。在设计模板时,我希望右侧栏目中的每一个元素能够无交迭,无空隙地,紧随着页眉(#header)。页眉包括logo和主导航栏。由于主导航栏是文本,它可以通过浏览器的控制来调整大小。这将直接影响整个页眉的高度。我本可以将右侧栏目基于页边距进行定位,根据页眉的标准高度为其指定top值。但是由于不同的浏览器的默认文字大小不同,引起了页眉的高度改变,这就意味着如果标题的高度增加,右侧栏目有可能会与页眉交迭。或者当页眉的高度小于标准,则页面与右边专栏之间将会出现空隙。

Because the positioned containing #content element always starts below the header, the absolute-positioned right column adjusts position based on the height of the header.图1

为了适应页眉的高度变化,我使用了一个已定位的容器元素(#content)。在标记(markup)中,这一容器紧随页眉,并且其位置被设为相对(position:relative;)。这就允许此容器元素出现于(并且影响)文档的正常流动;容器顶部会始终紧随页眉的底部,无论标题是变大还是缩小。因为#content已经过定位,它内部的元素也会因此而重新调整位置。右侧栏目(#subcol)包含于#content中,因此右侧栏目被放置于#content的右上角,而不是页面的右上角。这就使右侧栏目能够在竖直方向上适应页眉的高度变化,如图1中显示的那样。

置底的导航栏

Diagram 2-A shows the default navigation text size. 图2-A Diagram 2-B shows a larger navigation text size and the same header height. 图2-B

最后,我们回到 Adaptive Path 的导航栏,它体现了绝对位置和相对位置(making-absolute-relative)的使用方法。我本可以很容易的为导航栏指定一个固定的上侧外补丁(margin-top),以完成对它的定位。但是在这里,我希望页眉总能保持相同的高度,无论导航栏的文字变得多大或者多小。换句话说,我不希望导航栏下的墨绿色边框,相对于LOGO的竖直位置改变,如图2-A图2-B

更准确的说,导航栏的文字可以随意地调整大小,但是它的底线位置仍然保持不变。它总是与这条墨绿色的边框相切,并无交迭。通过为#nav元素设置相对位置(position:relative;),并为这一容器指定高度(72px),那么它就为其内部的层建立了限定了新的位置。这时,就可以为容器#nav的内部层指定一个置底绝对位置(bottom:0;)

这项技术当然也存在的其它的使用方法。对于希望为元素重新定义一个基于非页边距的绝对位置,这种想法其实并不罕见。做什么,为何这样做,这些背后所依据的理论对我来说是显而易见的。但是,它并不总是对每个人都那么显而易见。现在,这项技术对其它人来说,或许能够更加容易理解一点(也许甚至是显而易见的)。

posted @ 2006-06-10 18:00 穷鬼 阅读(...) 评论(...)  编辑 收藏