How to use the relative positioning and absolute positioning of CSS rationally in development

When talking about how to use it. Let's take a look at the relevant definition of CSS for the position property:

Static: No special positioning, objects follow normal document flow. Attributes such as top,right,bottom,left are not applied.
Relative: Objects follow normal document flow, but will be offset in normal document flow based on attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.
Absolute: objects are out of normal document flow and are absolutely positioned using attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.

What is a document flow? A document flow is a document flow that divides a form from top to bottom into rows and emits elements from left to right in each row. There are only three cases where elements are separated from the document flow: floating, absolute positioning, and relative positioning.

 在实际开发当中，通常都是我们相对定位搭配绝对定位使用。例如下面伪代码 <div class="content">            <div id="content_body1">                   //图片代码块              </div>        </div>            CSS            .content{                    clear: left;                    margin: 0 auto;                    position: relative;                    width: 990px;            }         .content_body1{              overflow: hidden;                    position: absolute;         }         这里用两个div包了一个图片段代码。外层div采用了相对定位，内层采用了绝对定位。 为什么这样做呢？ 这样的好处是，先把图片代码块固定在外层的div当中（<div class="content">），如果需要挪动图片位置。直接操作外层的div即可。这样就避免了直接挪动图片影响了页面的其它布局     

How to use the relative positioning and absolute positioning of CSS rationally in development