css (层叠样式表)定位

2025-06-02 17:18:50

1、一、绝对定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置是相对于<html>的,这个<html>就是网页左上角的点,如下图:

css (层叠样式表)定位
css (层叠样式表)定位

2、设置了绝对定位的元素没有占着原来的位置,下一个元素会填空,如图31-4,31-5:

css (层叠样式表)定位
css (层叠样式表)定位

3、二、相对定位:相对定位元素的定位是相对其正常位置而言的,如果设置了相对定位,它所占的区域一直保留,这一点与绝对定位相反,看演示:

css (层叠样式表)定位
css (层叠样式表)定位

4、从图31-7中可以看出,aaa敛财醣沁并没有填#test偏移后留下的空白区域。没有设置相对点的元素就以其正常位置做相对点,可以设置其他元素为相对点,做法是:其他元素设置属性为 pos足毂忍珩ition:ralative;作为相对点,然后自身设置属性为 position:absolute; 如图31-8,图31-9所示:

css (层叠样式表)定位
css (层叠样式表)定位

5、三、浮动定位,属性为float,属性值有left默认值,左浮动right右浮动none无浮动inherit继承父元素演示效果如图31-10,图31-11:

css (层叠样式表)定位
css (层叠样式表)定位

6、如果因为前一个元素的浮动问题而导致的被动浮动,可以用clear:both;来清除浮动。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢