对于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. Juint 单元测试（2）

    单元测试(junit testing),是指对软件中的最小可测试单元进行检查和验证.Java里单元指一个类. JUnit ,是一个开源的Java单元测试框架,是 Java的标准单元测试库,是非常重要第 ...

  2. 原生JavaScript获取css样式

    访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...

  3. asp.net viewstate 数据大导致错误

    当在ViewState中放入dataSet的数据量比较大的时候,当再点页面上的控件时,不会返回到后台,并且会出现如下错误: 或者是上面的12030改成500的错误. --解决方法:Viewstate绑 ...

  4. 在Wifi网络中嗅探明文密码(HTTP POST请求、POP等)

    全世界,现在大约50%的网站没有使用SSL加密,天朝尤其多. 我们都知道通过HTTP发送的数据都是明文,没有使用任何加密,即使是在数据敏感的登录页面. 本文的目的是:如果你在不熟悉的网络环境中,要注意 ...

  5. Lua编程

    lua编程大杂烩.博客其他方面也不错.先记录.http://www.cnblogs.com/stephen-liu74/category/360139.html

  6. 数据分析笔试-sql

    题目说明及要求: 以下是模似数据库里的表单信息,请根据要求写出SQL语句 表1:职工信息 表结构如下: 表名:Employee 职工ID   职工姓名       入职年份       部门ID A1 ...

  7. Spring按名称自动装配--byName

    在Spring中,“按名称自动装配”是指,如果一个bean的名称与其他bean属性的名称是一样的,那么将自动装配它. 例如,如果“customer” bean公开一个“address”属性,Sprin ...

  8. gulp 集成其他基于流的工具

    1. 流.缓冲.vinyl 文件对象 gulp 的流是虚拟文件对象 包含的属性有 base 文件名 path 文件路径 content 缓冲.nodejs 流 2. gulp 集成 browserif ...

  9. 搭建Ganglia乱码及其他问题总汇

    搭建Ganglia乱码及其他问题 搭建完Ganglia监控后图像显示正常,但是文字却显示都是小方框,最后确定是由于系统缺少字体导致的, /usr/share/fonts/  Centos默认存放字体的 ...

  10. nginx相关关键词

    nginx在unix系统中会以daemon(守护进程)方式在后台运行; nginx默认模式是多线程的; nginx会有一个master进程和多个worker进程,master进程主要用来管理worke ...