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

使用的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>
  7. <body>
  8. <div class="wrapper">
  9. <div class="box">
  10. <div class="bottom"></div>
  11. </div>
  12. </div>
  13. </body>
  14. </html>

原始的测试css：

  1. <style>
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. .wrapper{
  7. width:400px;
  8. overflow:hidden;
  9. background:#000;
  10. margin:20px auto;
  11. position:relative;
  12. }
  13. .box{
  14. width:200px;
  15. height:400px;
  16. background:#F00;
  17. margin-left:40px;
  18. }
  19. .bottom{
  20. width:200px;
  21. height:40px;
  22. position:absolute;
  23. background:#0F0;
  24. top:0;
  25. left:0;
  26. }
  27. </style>

上面的图是普通的定义了top和left的，绝对定位的元素在父元素中寻找相对或绝对定位的并进行定位。

而要是这top和left不进行定义，则如下图：

  1. .bottom{
  2. width:200px;
  3. height:40px;
  4. position:absolute;
  5. background:#0F0;
  6. }

则绝对定位元素对位参照上层父级元素。

  1. .bottom{
  2. width: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值对定位的作用：

  1. .bottom{
  2. width:200px;
  3. height:40px;
  4. position:absolute;
  5. background:#0F0;
  6. top:30px;
  7. margin-top:30px;
  8. left:20px;
  9. }

单单是left定位的话很容易猜到下图：


 而用单单用margin-left呢？

  1. .bottom{
  2. width: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

  1. .bottom{
  2. width: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地定位居中元素：

具体如下：

  1. #con{
  2. position:absolute;
  3. left:50%;
  4. width:760px;
  5. margin-left:-380px;
  6. }

上面的代码就是应用了得出的观点的第三点执行的，而且这种上面的定位方式是完全遵循Css原则的无hack的模式

浅谈块元素绝对定位的margin属性的更多相关文章

  1. 浅谈js数组中的length属性

    前言 一位正在学习前端的菜鸟,虽菜,但还未放弃. 内容 首先,我们都知道每个数组都有一个length属性 这个length属性一般我们用来循环遍历的约束,一般我们都会把他认为是该数组里面有几个元素这个 ...

  2. 浅谈JavaScript对象数组根据某属性sort升降序排序

    1.自定义一个比较器,其参数为待排序的属性. 2.将带参数的比较器传入sort(). var data = [ {name: "Bruce", age: 23, id: 16, s ...

  3. 浅谈Javascript数据属性与访问器属性

    ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...

  4. 12.24 ES6浅谈--块级作用域，let

    第一部分:ES6新增了块级作用域,let关键字用于声明变量,相较于var而言,let关键字不存在声明提前. 1.ES6真正的出现了块级作用域,使用双花括号括住并在其中用let声明变量,会存在暂时性死区 ...

  5. CSS属性中的display属性浅谈；

    首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...

  6. 浅谈HTML中的块级元素和内联元素

    一.基本概念 1.块级元素(block element):一般都从新行开始占据一定的矩形空间,可以设置其宽.高属性来改变矩形的大小.一般情况下块级元素可以包含内联元素和其它块级元素,但也有特殊如for ...

  7. 浅谈WPF依赖项属性

    浅谈WPF依赖项属性 0. 引言 依赖项属性虽然在使用上和CLR属性一样,但是它是WPF特有的,不同于CLR属性.只是封装为我们常用CLR的属性,在语法使用上和CLR属性一样.WPF中一些功能:动画, ...

  8. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  9. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

随机推荐

  1. Castle IOC概念理解

    最近在用Castle,里面有些概念比较容易混淆,特此解释一下: 1. 容器(Container):Windsor是一个反转控制容器.它创建在一个微内核的基础之上,这个微内核能够扫描类并且试图找到这些类 ...

  2. vbs 字符串替换

    http://blog.csdn.net/flm2003/article/details/7212448 function返回值 http://www.cnblogs.com/wakey/p/5758 ...

  3. 《Drools7.0.0.Final规则引擎教程》第4章 4.2 lock-on-active

    lock-on-active 当在规则上使用ruleflow-group属性或agenda-group属性的时候,将lock-on-active 属性的值设置为true,可避免因某些Fact对象被修改 ...

  4. LINUX (centos)设置IP地址，网关，DNS

    首先:备份原始配置文件: [logonmy@logon ~]$ cd /etc/sysconfig/network-scripts/ [logon@logon network-scripts]$ pw ...

  5. 用JQuery写出登录弹出框

    类似百度的登录弹出框,可用jquery的fadeIn(),hide(),show(),slideDown()等动画函数实现,一下为html5 代码: <!DOCTYPE html> < ...

  6. Asp.net页面间传值方式汇总

    七种传值方式,分别是:URL传值,Session传值,Cookie传值,Server.Transfer传值,Application传值,利用某些控件的PostBackUrl属性和使用@Previous ...

  7. 利用Github免费搭建个人主页(个人博客)

    之前闲着, 利用Github搭了个免费的个人主页. 涉及: Github注册 Github搭建博客 域名选购 绑定域名 更多 一  Github注册 在地址栏输入地址:http://github.co ...

  8. codechef Graph on a Table

    codechef Graph on a Table https://www.codechef.com/problems/TBGRAPH 题意 : 一个\(n\times m\)的网格图.\(q\) 个 ...

  9. ansible安装基本使用

    备注使用yum (centos7)   1. 安装 yum install -y ansible 2. 免密登录(ssh,最好使用dns 解析) // create ssh key ssh-keyge ...

  10. ASP.NET Cache缓存的使用

    ASP.NET Cache是提升系统性能的重要方法,它使用了“最近使用”原则(a least-recently-used algorithm).在数据库访问中经常会用到Cache保存数据库数据. 1. ...