相对.绝对.固定定位

1.1.相对定位 position:relative
*设置相对定位后,原有的空间仍然存在,但是原有空间可能被现有元素所占据,并且会影响后面元素排版,常用于元素位置小幅度调整。
*相对定位的参考系是本身。
*加入其他属性如(top.left),可使现在的位置相对原来的位置发生偏移。
在这里插入图片描述在这里插入图片描述

1-2.绝对定位 position:absolute
*绝对定位后相当于独立存在,他所相对的位置是父级元素,如果不存在,那么会相对于body定位。
*当绝对定位没有设置top,left,bottom,right等属性则相当于相对定位 。
*绝对定位后不需要区分行内.块级元素了,直接设置属性宽高.
在这里插入图片描述在这里插入图片描述
1-3.固定定位 position:
*固定定位永远相对于浏览器窗口进行定位。
*固定定位会固定在浏览器窗口的某给位置不会随滚动条的滚动而滚动。
*一般用于栏目导航,和一些小广告。
在这里插入图片描述在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44254122/article/details/87727475
今日推荐