absolute与relative元素定位的混合使用

父与子模块都是absolute

解说父模块：

1. 父模块，是以网页左上角为基准，向下移动50px，向右移动100px；
2. 模块的宽度根据内容的长度而定；
3. 也不排挤其他模块的空间；

解说子模块：

1. 子模块，是以父模块左上角为基准，向下移动10px，向右移动10px；
2. 模块的宽度自行设定与父模块无关，默认为文字的长度
3. 也不排挤其他模块的空间；

父模块是absolute，子模块是relative

解说父模块：

1. 父模块，是以网页左上角为基准，向下移动50px，向右移动100px；
2. 模块的宽度根据内容的长度而定；
3. 也不排挤其他模块的空间；

解说子模块：

1. 子模块，是以父模块左上角内容为基准，去掉内容的行高，向下移动10px，向右移动10px；
2. 模块的宽度自行设定与父模块无关，默认为文字的长度
3. 也不排挤其他模块的空间；

父模块是relative，子模块是relative

解说父模块relative：

1. 父模块，是以其原本第二个div模块的下方为基准，向下移动50px，向右移动100px；
2. 模块的宽度可以自主设定；
3. 也不排挤其他模块的空间；

解说子模块relative：

1. 子模块，是以父模块左上角内容为基准，去掉内容的行高，向下移动10px，向右移动10px；
2. 模块的宽度自行设定与父模块无关；
3. 也不排挤其他模块的空间；

父模块是relative，子模块是absolute

解说父模块relative：

1. 父模块，是以其原本第二个div模块的下方为基准，向下移动50px，向右移动100px；
2. 模块的宽度可以自主设定；
3. 也不排挤其他模块的空间；

解说子模块relative：

1. 子模块，是以父模块左上角边框为基准，向下移动10px，向右移动10px；
2. 模块的宽度自行设定与父模块无关，默认为文字的长度
3. 也不排挤其他模块的空间；