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

Question

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

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

但是这是为什么呢？
这是正常情况显示：

我在实际中实验了一下
如果父元素为absolute或者子元素为relative，就变成下面这样了。子元素跑到下面了。我前后设置的子元素bottom都是0.

这前后的差距让我很不解。w3school还有网上这两个定位的概念我都很清楚了，但是没人讲过这种嵌套的时候会是什么情况。

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

Answer 1

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，也就是没有移动。