CSS中的position:relative是相对于父级元素还是相对于同一级元素?

Question

如题.可能是我笨,在dreamweaver试了几次还不能确定.

Answer 1

相对元素自己本来没加这个属性时的位置，而不是相对父级或其他同级元素。你这样理解：

浏览器显示网页区左上角原点为0坐标原点，你就看本页，百度搜索框框前面有百度的Logo标志，拿页面上百度的logo图片打比方，我目测了下，现在百度logo图片大概在页面距离0坐标原点的x横向约8厘米的地方，离y竖向约1厘米的地方。

那么 position:relative 相对的就是这个x=8cm y=1cm这个坐标。

假设你给logo图片的css加上下面属性：position:relative; left:1cm;top:4cm;
那么它的位置将位于：x横向9厘米，y竖向离浏览器顶部5厘米的地方，即：
x=8cm+1cm y=1cm+4cm

Answer 2

Q:相对于父级元素还是相对于同一级元素?
A:是相对于自身的（准确的说是元素最上最左边的那个像素点）,但计算方式是具体的数值或者以父级作为计算标准的百分比

Answer 3

相对父级，跟同级元素没关系

Answer 4

Vue实践-CSS样式position/display/float属性对比使用

Answer 5

举个实例吧：
<div style="width:200px;height:50px;position:relative;background:#999999">
<span style="position:absolute;display:block;width:50px; height:50px; background:#EEE;top:10px; left:10px;">
</div>
这样你便可以看到一个200*50的容器里面一直会包含着一个距离顶部和左部10像素的小容器。层次结构就是：绝对容器的外部要有个相对容器，一个相对容器可以包含很多绝对容器。当然绝对定位不建议不用，一是多了会结构混乱，二是会导致浏览器崩溃。自己多动手，出的结果最真实，等别人揭晓答案，那不是搞技术该做的。本回答被网友采纳