对于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. Tomcat Jsp环境搭建全过程--重拾jsp

    搭建Jsp环境最简单的办法就是 Java+Tomcat 能很好的支持jsp代码 .首先,我们需要下载JDK和Tomcat安装包 JDK下载地址 http://www.oracle.com/techne ...

  2. Oracle新用户以及授权的若干问题

    Database 实验4 问题: 授权语句 grant create table to user_name; 收回授权语句 revoke create table from user_name; 注意 ...

  3. LeetCode — （1）

    摘要: Nim Game.WordPattern.Move zeros.First Bad version.Ugly Number五个算法的python实现. 一个月多没更新,大概是因为状态一直不太好 ...

  4. 迁移 Windows 上 Oracle 11.2.0.3.0 到 Linux 上 Oracle 11.2.0.3.0

    一.迁移前数据库基本信息统计 查看数据库版本 SELECT * FROM V$VERSION; /* Oracle Database 11g Enterprise Edition Release 11 ...

  5. 深入理解java虚拟机-第十章-早期（编译期）优化

    第10章  早期(编译期)优化 javac编译过程: 1.解析与填充符号表过程 词法.语法分析 将源代码的字条流转变为标记(Token)集合.如“int a = b + 2”这名代码包含了6个标记,分 ...

  6. 21天学通C++_Day1

    被阿里实习生的第一轮电话面试刷掉以后,幡然醒悟,发现以前学习的C++基础一点都不扎实.为了把基础打扎实,重新学习一遍:为了让自己不放弃,也顺便可以把当天学到的东西记录下来,开始了写博客. 学习书籍:& ...

  7. 阿里云部署django实现公网访问

    本博的主要目的是对阿里云部署django实现公网访问进行一次简单的记录,方便日后查询. 内容目录: (1)申请阿里云服务器及安全组配置 (2)实现ssh远程控制 (3)实现ftp文件传输 (4)安装p ...

  8. verilog数组定义及其初始化

    这里的内存模型指的是内存的行为模型.Verilog中提供了两维数组来帮助我们建立内存的行为模型.具体来说,就是可以将内存宣称为一个reg类型的数组,这个数组中的任何一个单元都可以通过一个下标去访问.这 ...

  9. js中使用分号的情况

  10. 自定义标签库_tag

    1)最简单的标签库 1,继承Tag接口,重写doEndTag()方法,返回类型不同后面流程不一样 想要jsp的内容必须重写了setPageContent()方法 再JspWriter out = pa ...