关于相对定位和绝对定位嵌套的问题,求解答

1简单描述下我的问题,新手,刚学定位块。
遇到了一个问题:
父元素的定位方式:relative或者absolute
子元素的定位方式:relative或者absolute

按照教程里说的,一般父元素设置为relative,子元素为absolute

但是这是为什么呢?
这是正常情况显示:
图片说明

我在实际中实验了一下
如果父元素为absolute或者子元素为relative,就变成下面这样了。子元素跑到下面了。我前后设置的子元素bottom都是0.
图片说明
这前后的差距让我很不解。w3school还有网上这两个定位的概念我都很清楚了,但是没人讲过这种嵌套的时候会是什么情况。

希望懂的朋友给解答一下,不甚感谢。10C币奉上。

2个回答

position的定位方式有4种 static/relative/absolute/fixed;
fixed 是相对于浏览器窗口定位的,先不谈。
static 是元素的位置随常规文档流排列,不可随意移动。也是position的默认值。
relative 是参照元素在常规文档流中的位置,通过top,right,bottom,left这4个定位进行偏移。
absolute 是元素脱离常规文档流,偏移属性参照的是离自身最近的非static定位祖先元素,如果没有非static定位的祖先元素,则一直回溯到body元素

当父元素的定位方式是 relative或absolute或fixed,子元素定位方式是absolute,bottom是0
表示子元素的底边与父元素的底边距离为0。

如果子元素为relative,则子元素只与它在父元素的常规文档流中的位置有关系,与父元素的定位方式没关系,不论父元素是什么定位方式,子元素的位置都不受影响。
如果没有设置position,依照常规文档流中的位置文字本就是在图片的下面。
你子元素定位方式是relative,bottom是0,表示的是元素在常规文档流中的位置向下偏移0px,也就是没有移动。

weixin_45735939
爱法斗学编程 我仔细想了下,是明白了。还是对于理论上的概念没有理解够深。谢谢
10 个月之前 回复
weixin_45735939
爱法斗学编程 您好,您这个并没有回答我的问题,我的意思是正常是子绝父相,但是我不这样设置行不行,我实际试了,不行,我想知道的是为什么?
10 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问