1. 全栈程序员必看首页

margin对css绝对定位的影响

全栈程序员-站长 • • 未分类 • 阅读 6

margin对css绝对定位的影响原文链接 http leyteris iteye com blog 试验 css 绝对定位时 跟自己预想的不太一样 有点迷 查了之后才发现还有 margin 的影响 正文 对于 div 的绝对定位一直以为 margin 属性是无效的 只是通过 top left bottom right 定位 然而今天的却发现不是这样的 于是对其做了些实验

原文链接：http://leyteris.iteye.com/blog/

试验css绝对定位时，跟自己预想的不太一样，有点迷，查了之后才发现还有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>  
  7.   
  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.     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不进行定义，则如下图：

 

Css代码  
收藏代码

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

 
 

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

 

 

Css代码  
收藏代码

  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值对定位的作用：

 

 

Css代码  
收藏代码

  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定位的话很容易猜到下图：

 

 

Css代码  
收藏代码

  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. }  

 

 

如果margin和left一起出现呢？

为了和前面的区别开来，我采用left：10px

 

 

 

Css代码  
收藏代码

  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、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值

4、对于不使用left也没有margin的，自动按照上层标准流进行定位



 

补充一点：

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

 

 

 

 

引申应用：

 

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

 

具体如下：

Css代码  
收藏代码

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

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

以下内容个人补充，与转载无关：

<P>元素的margin同样有影响，可以个人试验一下；

首先<p>标签在主流浏览器是有默认的margin值的：默认margin：12px 0;所以实验之前先设置所有的p标签margin:0;

（附一篇博文：http://blog.csdn.net/qiexh/article/details/）


版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232502.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2025年10月7日 上午10:01
下一篇 2025年10月7日 上午10:22


相关推荐

  • 基于单片机的毕业设计题目_单片机课题

    基于单片机的毕业设计题目_单片机课题

    基于单片机的毕业设计题目_单片机课题地铁报站系统方案说明经过酷毕啦电子设计室3个月的奋斗和不限努力，设计出了2款有个报站系统的课题：一种为自动报站系统；一种为无线控制报站系统，该系统除了可以设计为地铁报站系统，还可以设计成公交报站系统，有需要了解和学习的同学可以加q:3407232510来进行学习和探讨。本系统所有的全国各地的地铁，无论几号线，都实用这套系统，完全个性定制！产品视频讲解视频链接*（以长沙地铁2号线讲解为例）：htt…

    全栈程序员-站长的头像 全栈程序员-站长
    2026年4月17日
    4
  • 解决 Linux 内核代码审查人员短缺问题

    解决 Linux 内核代码审查人员短缺问题

    解决 Linux 内核代码审查人员短缺问题

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月6日
    47
  • Tensorflow2实现像素归一化与频谱归一化[通俗易懂]

    Tensorflow2实现像素归一化与频谱归一化[通俗易懂]

    Tensorflow2实现像素归一化与频谱归一化[通俗易懂]归一化技术的改进是生成对抗网络(GenerativeAdversarialNetworks,GAN)中众多改进的一种，本文介绍常用于当前GAN中的像素归一化(Pixelnormalization,或称为像素规范化)和频谱归一化(Spectralnormalization,或称频谱规范化)，在高清图片生成中，这两种归一化技术得到了广泛使用，最后使用Tensorflow2实现像素归一化和频谱归一化。

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月31日
    8
  • <span role="heading" aria-level="2">WebLogic的下载与安装

    WebLogic的下载与安装

    WebLogic的下载与安装一、WebLogic的介绍WebLogic是美国bea公司出品的一个applicationserver，确切的说是一个基于Javaee架构的中间件，纯java开发的，最新版本WebLogicSe

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月1日
    33
  • maven上传就私库

    maven上传就私库

    maven上传就私库上传命令：mvndeploy:deploy-file-DgroupId=com.cmos-DartifactId=itframe-boot-base-Dversion=1.0.1-SNAPSHOT-Dpackaging=jar-Dfile=D:\s\itframe-boot-base-1.0.1-SNAPSHOT.jar-Durl=http://10.97.85.11:38081…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月18日
    17
  • MySQL InnoDB存储引擎之锁

    MySQL InnoDB存储引擎之锁

    MySQL InnoDB存储引擎之锁概念 nbsp nbsp nbsp nbsp nbsp nbsp 锁是用来管理对共享文件的并发访问 innodb 会在行级别上对数据库上锁 不过 innodb 存储引擎会在数据库内部其他多个地方使用锁 从而允许对不同资源提供并发访问 例如操作缓冲池中的 LRU 列表 删除 添加 移动 LRU 列表中的元素 为了保证一致性 必须有锁的介入 MyISAM 引擎是表锁 而 InnoDB 提供一致性的非锁定读 行级锁 且行级锁没有相关额外的开销 nbsp nbsp nbsp 锁

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号