关于相对定位与绝对定位中父子元素的小发现和疑问，记录学习

关于相对定位与绝对定位中父子元素的小发现和疑问，记录学习（更新网友回答和自己理解）

div{
border:2px red solid;
color: #ff0;
}
#box1{
width:170px;
height:190px;
position: absolute;
}
#box2{
width:99%;
position:absolute;
top: 160px;
}

</style>

一起享受咖啡带来的温暖吧

**1** box1的css属性里如果不设置position定位，不仅子元素box2的定位会依据上一层元素即body，连width的宽度也是，因为设置的是百分比，所以直接满屏显示了

2问题：
大家都说，也都知道 父子都设置定位的话，父元素为relative，，子元素为absolute。
但是为什么不能反过来呢，或者都是绝对定位，或者都是相对定位呢？ 我实验了一下，如果父元素的定位left或者top有属性值，子元素的位置就变得乱了。不理解。后面记得留意这个问题。

最新的网友回答：
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，也就是没有移动。
个人理解：
realtive不仅仅是相对直接父元素，还有另一个关键的信息，就是它是相对自己在文档流的位置来的。
在上面案例中，父元素无论为什么，当子元素position为relative时，它就相对于自己在文档流时的位置。而在文档流中，它是div元素，肯定和图片不在同一行的，它就在图片下面，所以最终显示在下面是没问题的。