淘先锋技术网

首页 1 2 3 4 5 6 7

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 时,其位置将是包含块边沿的默认位置。

在进行网页布局时,绝对定位是非常有用的技术。但是,要时刻记住绝对定位要与其它的定位方式结合使用。建议你在进行绝对定位之前,先考虑其他方式,然后再按需使用绝对定位来微调布局效果。