对于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. matlab将矩阵写入文件

    % %% date: 5/5/2017 % %% Author: Congbo Ma, Hu Wang % % write matrix to file function wrt_mat_to_fil ...

  2. ng 双向数据绑定 实现 注册协议效果

    效果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> ...

  3. POJ1251 Jungle Roads

    解题思路:看懂题意是关键,Kruskal算法,最小生成树模板. 上代码: #include<cstdio> #include<cstring> #include<algo ...

  4. 【转】斜率优化DP和四边形不等式优化DP整理

    (自己的理解:首先考虑单调队列,不行时考虑斜率,再不行就考虑不等式什么的东西) 当dp的状态转移方程dp[i]的状态i需要从前面(0~i-1)个状态找出最优子决策做转移时 我们常常需要双重循环 (一重 ...

  5. Linux内核开发

    Linux内核开发 https://www.cnblogs.com/pugang/p/9728983.html 很早之前就想写一篇文章总结一下Linux Kernel开发的相关资料,项目的原因,再加上 ...

  6. 【eclipse】 怎么解决java.lang.NoClassDefFoundError错误

    前言 在日常Java开 发中,我们经常碰到java.lang.NoClassDefFoundError这样的错误,需要花费很多时间去找错误的原因,具体是哪个类不见了?类 明明还在,为什么找不到?而且我 ...

  7. datasnap的初步

    datasnap的初步-回调函数 服务器端 TServerMethods1 =class(TComponent) private { Private declarations } public { P ...

  8. iptables防火墙工作原理

    iptables防火墙工作原理 简介:iptables防火墙工作在网络层,针对TCP/IP数据包实施过滤和限制,iptables防火墙基于内核编码实现,具有非常稳定的性能和高效率: iptables属 ...

  9. RecyclerView（滚动控件）的用法

    1.首先在build.gradle中添加依赖库 compile 'com.android.support:recyclerview-v7:24.2.1' 2.修改activity_main.xml & ...

  10. mysql实战优化之五： 更新/插入优化 sql优化

    通常情况下,当访问某张表的时候,读取者首先必须获取该表的锁,如果有写入操作到达,那么写入者一直等待读取者完成操作(查询开始之后就不能中断,因此允许读取者完成操作).当读取者完成对表的操作的时候,锁就会 ...