网站建设中元素绝对定位时,如果除bottom外某个任意偏移属性设置为auto,会有一种特殊的行为。下面以top为例,考虑以下标记:
<p>
When we consider Che effect of positioning, it quickly becomes clear that authors
can do a great deal of damage to layout, just as they can do very interesting
things.<span style="position.: absolute; top: auto; left: 0;">[4]</span> This is usually the case with useful technologies: the sword always has at least two edges, both of them sharp.
</P>
会发生什么呢?对于left,很简单:元素的左边界会相对于其包含块的左边界放置(可以假设其包含块是初始包含块)。不过,对于top,还会发生一些更有意思的事情。定位元素的顶端要相对于其未定位前本来的顶端位置对齐。换句话说,假设网页设计人员span的 position值为static,想象一下它会放在哪里,这就是其静态位置,也就是计算出的其顶边应在的位置。CSS2.1这样描述:
……(元素的)“静态位置”一词大致含义是:元素在正常流中原本的位置。更确切地讲,“顶端”的铮态位置是从包含块的上边界到假想框的上外边距边界之间的距离(假想框是假设元素“position”属性为“static”时元素的第一个框)。如果这个假想的元素框在包含块的上面,则这个值为负。
因此,可以得到如图10-42所示的结果,
图10-42:绝对定位一个元素,与其“静态”位置一致
“[4]”位于段落内容之外,因为初始包含块的左边界在该段落左边界的左边。
如果left和right设置为auto,也适用同样的基本规则。在这些情况下,定位元素的左(或右)边界与元素未定位时该边界原本的位置对齐。下面修改前面的例子,使top 和left都设置为auto:
<P>
When we consider the effect of positioning, it quickly becomes clear that
can. do a great deal of damage to layout, just as they can do very interesting
things.<span style="position: absolute; top: auto; left: auto;">[4]</span> This is usually the case with useful technologies: the sword always has at least two edges, both of them sharp.
</P>
图10-43:绝对定位一个元素,与其“静态”位置一致
“[4]”现在就位于其本来位置(即未定位前的位置)。注意,由于它已经定位,其正常流空间关闭。这会导致网站建设定位元素与正常流内容重叠。
注意:应该注意到,网站建设CSS2和CSS2.1都指出在这样的情况下,*网页设计者可以自由猜测可能的[静态]位置。当前浏览器在这方面做得很好,会按要求处理top和left的auto值,使元素的位置与其在正常流中原本的位置一致。
这种自动放置只在某些情况下可行,这些情况下通常对定位元素的其他尺寸没有什么限制。前面的例子可以自动放置,因为它对其高度或宽度没有任何限制,对下边界和右边界的放置也没有限制。不过,假设出于某种原因确实有这样一些限制会怎么样呢?请考虑以下标记:
<p>
When we consider the effect of positioning, it' quickly becomes clear that authors
can do a great deal of damage to layout, just as they can do very interesting
things.<span style="position: absolute; Copt auto; left: auto; right: 0; bottom: 0; height: 2em; width: 5em;">[4]</span> This is usually the case with
useful technologies: the sword always has at least two edges, both of them sharp.
</P>
此时无法满足以上的全部值。要确定此时会发生什么,这是下一节要讨论的问题。
当前文章标题:网页设计中的自动边偏移
当前URL:http://www.lyjtt.cn/news/wzzz/automatic-offset.html
下一篇:网页设计中非替换元素的放置和大小