浅谈块元素绝对定位的margin属性

浅谈块元素绝对定位的margin属性
对于div的绝对定位一直以为margin属性是无效的，只是通过top，left，bottom，right定位，然而今天的却发现不是这样的，于是对其做了些实验：

使用的HTML原始测试文件：
Html代码
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5. <title>test</title>
6. </head>
8. <body>
9. <div class="wrapper">
10. <div class="box">
11. <div class="bottom"></div>
12. </div>
13. </div>
14. </body>
15. </html>
原始的测试css：
Html代码
1. <style>
2. *{
3. margin:0;
4. padding:0;
5. }
6. .wrapper{
7. 400px;
8. overflow:hidden;
9. background:#000;
10. margin:20px auto;
11. position:relative;
12. }
13. .box{
14. 200px;
15. height:400px;
16. background:#F00;
17. margin-left:40px;
18. }
19. .bottom{
20. 200px;
21. height:40px;
22. position:absolute;
23. background:#0F0;
24. top:0;
25. left:0;
26. }
27. </style>
上面的图是普通的定义了top和left的，绝对定位的元素在父元素中寻找相对或绝对定位的并进行定位。

而要是这top和left不进行定义，则如下图：
Css代码
1. .bottom{
2. 200px;
3. height:40px;
4. position:absolute;
5. background:#0F0;
6. }
则绝对定位元素对位参照上层父级元素。
Css代码
1. .bottom{
2. 200px;
3. height:40px;
4. position:absolute;
5. background:#0F0;
6. top:30px;
7. margin-top:-30px;
8. }
上面代码的显示和上面的图是一样的。top的值是top和margin-top相加的值

下面的也是：

我们把margin-top的值改为30px;

则是下面的图：

说明上面的推断可能正确，总的top值是两个值的叠加。

下面我们用left方向来说明一下中间的.box的margin值对定位的作用：
Css代码
1. .bottom{
2. 200px;
3. height:40px;
4. position:absolute;
5. background:#0F0;
6. top:30px;
7. margin-top:30px;
8. left:20px;
9. }
单单是left定位的话很容易猜到下图：

而用单单用margin-left呢？
Css代码
1. .bottom{
2. 200px;
3. height:40px;
4. position:absolute;
5. background:#0F0;
6. top:30px;
7. margin-top:30px;
8. margin-left:20px;
9. }
可以看到它是根据未用position定位的父级元素的边界进行margin定位的。

如果margin和left一起出现呢？

为了和前面的区别开来，我采用left：10px
Css代码
1. .bottom{
2. 200px;
3. height:40px;
4. position:absolute;
5. background:#0F0;
6. top:30px;
7. margin-top:30px;
8. margin-left:20px;
9. left:10px;
10. }
可以看到绿色的块元素左溢出红块，以为现在的left值为30px。

这个在IE6中也同样适用：

现在我们可以得到结论了，当绝对定位块和上层相对定位（或绝对定位）中间夹着一层标准流（或浮动）的块时：

1、只使用left等定位是按照上层相对定位（或绝对定位）的边界进行定位

2、只使用margin相关属性定位时按照上层标准流（或浮动）块的边界进行定位

3、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值

补充一点：

元素的上下和左右分别对应于哪层块互不干扰。

引申应用：

上述特点可以用来无hack地定位居中元素：

具体如下：
Css代码
1. #con{
2. position:absolute;
3. left:50%;
4. 760px;
5. margin-left:-380px;
6. }
上面的代码就是应用了得出的观点的第三点执行的，而且这种上面的定位方式是完全遵循Css原则的无hack的模式
相关阅读:
C—动态内存分配之malloc与realloc的区别
 C++动态内存管理之深入探究new和delete
Linux粘滞位的设置
 linux—find指令常见用法示例
 Linux系统date命令的参数及获取时间戳的方法
 Linux系统文件的三个重要时间详解
 《Linux命令行与shell脚本编程大全第3版》Shell脚本编程基础---27
《Linux命令行与shell脚本编程大全第3版》Shell脚本编程基础---26
《Linux命令行与shell脚本编程大全第3版》Shell脚本编程基础---25
《Linux命令行与shell脚本编程大全第3版》Shell脚本编程基础---24
原文地址：https://www.cnblogs.com/autismtune/p/5420111.html