HTML+CSS:css定位详解之相对定位、绝对定位和固定定位(示例代码)

栏目: 技巧 · 发布时间: 2021-03-04

来源:cnblogs.com

简介  这篇文章主要介绍了HTML+CSS:css定位详解之相对定位、绝对定位和固定定位(示例代码)以及相关的经验技巧,文章约817字,浏览量279,点赞数7,值得参考!

相对定位

如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

技术图片

 

绝对定位

如果想为元素设置层模型中的绝对定位,需要设置position:absolute;,这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素,即相对于浏览器窗口。

 


以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

[原创] css中的绝对定位和相对定位

【转载】CSS之绝对定位及相对定位(示例代码)

css中的相对定位与绝对定位

css 浮动 绝对定位 和 相对定位(示例代码)

css绝对定位、相对定位和文档流的那些事