css position 定位详解

Posted yaoliuyang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css position 定位详解相关的知识,希望对你有一定的参考价值。

菜鸟教程讲解

这里只讲解一下 相对定位relative,与绝对定位absolute

relative:相对定位
1.相对定位是相对于自己原来的位置进行定位
定位之后空间不释放,也就是说如果有三个元素如果中间一个元素
使用相对定位之后偏离了原来的元素,那么第三个元素不会挤到第二个
元素中,
技术图片

absolute:绝对定位:
1.相对最近已经定位的祖先元素:如果祖先元素没有定位那么相对于body元素进行定位
2.定位之后div释放,也就是说第二个元素使用绝对定位之后,第三个元素会挤到前面来
技术图片

如果绝对定位的父元素已经定位了relative:那么此时定位的元素就相于已经定位的父元素去定位

技术图片

以上是关于css position 定位详解的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

css position 定位详解

CSS position: absoluterelative定位问题详解

Css中Position定位详解

详解CSS的相对定位绝对定位和固定定位

css定位详解