CSS 绝对定位是CSS 最基础和重要的部分之一,它能够使你的布局更加灵活和自由。学习绝对定位的规则,能够帮你更好地完成你的网页设计。
position: absolute; top: ...; bottom: ...; left: ...; right: ...;
上述代码是绝对定位的最基本的CSS样式定义。其中,position: absolute;
是必须的。它使元素从文档流种完全脱离,可以独立地定位。紧接着的四个属性,top, bottom, left, right
用来设置元素的绝对位置。这些属性通常与相对定位和其他布局方式一起使用。
使用top和left属性可以指定元素的上和左边缘与其包含块(容器)的上和左边缘之间的距离。例如,top: 10px
将元素的上边缘移动到与其包含块的上边缘相差10像素的位置。同理,使用bottom和right属性可以指定元素的下和右边缘的距离。
另外一个需要注意的点是,如果没有明确指定包含块,则绝对定位元素的包含块是最近一个已定位的父元素。如果父元素没有定位,则元素的包含块是根元素。在这种情况下,top, bottom, left, right
中的任何一个属性都可以使用 auto 值。当一个元素的值为 auto 时,其位置将是包含块边沿的默认位置。
在进行网页布局时,绝对定位是非常有用的技术。但是,要时刻记住绝对定位要与其它的定位方式结合使用。建议你在进行绝对定位之前,先考虑其他方式,然后再按需使用绝对定位来微调布局效果。