css position relative css position
其实css position relative的问题并不复杂，但是又很多的朋友都不太了解css position，因此呢，今天小编就来为大家分享css position relative的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
在CSS中position: relative是什么意思
在CSS中，“position: relative”是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。
position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
relative属性相对比较简单，它是相对它所属父元素来进行偏移的，可以通过“top”、“bottom”、“left”、“right”4个偏移属性进行定位。
扩展资料：
position属性的其它定位类型：
1、absolute
绝对定位，依据父元素中最近设置为relative定位类型的元素进行偏移。
2. fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
3. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。
参考资料来源：百度百科-position（定位元素）
position:relative的意思是什么
在CSS中，“position: relative”是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。
position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
relative属性相对比较简单，它是相对它所属父元素来进行偏移的，可以通过“top”、“bottom”、“left”、“right”4个偏移属性进行定位。
扩展资料：
position属性的其它定位类型：
1、absolute
绝对定位，依据父元素中最近设置为relative定位类型的元素进行偏移。
2. fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
3. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。
参考资料来源：百度百科-position（定位元素）
深入理解 position: relative;
先插一嘴定位的其它值，最初学习positive的时候，只是对position: absolute的意思不明白:
不明觉厉，在项目中遇到坑的时候才真正理解已定位的祖先元素是说当前标签的父级元素应该是absolue、或者relative的时候，子标签才可以用绝对定位。当时很是欣喜，以为对position已经完全掌握，然而...
元旦前在做一个项目的时候如下界面:
大致看了一眼，没什么难度啊，一直用 position: relative;设置top就好了啊
事实上，在给从上到下的元素都用relative之后，整个界面的布局并不像预期的一样，第一个设置position: relative;的元素正常，下面设置position: relative;的元素会往浏览器上移before元素的-top px值。
百思不得骑姐...
旁边坐了一个vue leader：查看一下盒模型！
擦，为什么会有一个-50的东西出现？浏览器解析的css样式中并没有设置这样一个东西。
本来以为在给标签设置
之后，下面跟着的元素就会跟着一起往下排，显示结果表明很可能是自己对 position: relative;的理解有偏差，搜了好久，发现了这样一句话:
position: relative;只是在视觉上显示出有偏差
这时候我们再看文档中:
就是说标签其实在DOM中还占据着原始的位置，只是在视觉上给人偏移的错觉。这样就可以合理解释为何第二个往后设置relative的元素没有跟着往下排列。很自然的，既然还占着原来的位置，那就手动设置 margin-bottom: 15px;就可以实现真正意义上的DOM位置偏移。
文章分享结束，css position relative和css position的答案你都知道了吗？欢迎再次光临本站哦！