css之“深入理解position:absolute和position:relative的区别”

<!--四、position:absolute和position:relative的区别-->
<!--1.脱离文档流的区别,就是不会显示新的一行-->
<!--定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在-->
<!--定位为absolute的层脱离正常文本流，但位置不在存在-->

<!--2.相对的元素不一样-->
<!--relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式-->
<!--absolute定位的层总是相对于其最近的定义为absolute或relative的父层,如果都没有，就会以body为父层-->

<!--3.display属性的变化-->
<!--relative不会改变行内元素的display属性,可以设置宽高-->
<!--absolute的display为block-->

<div style="position: relative;background: #333333;margin-top: 50px;height: 50px;top: 20px">
    <span style="position: absolute; background: #c0a16b">脱离正常文本流,div是块元素</span>