以前一直对绝对定位下的margin作用很模糊，今天细看一下

不使用top,left，margin等

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .container{

      position: relative;

      border: 1px solid blue;

      width: 500px;

      height: 500px;

      margin: 100px auto;

    }

    .child{

      position: absolute;

      width: 100px;

      border:1px solid red;

      height: 100px;

    }

    .before{

      display: inline-block;

      width: 100px;

      height: 100px;

      border: 1px solid black;

    }

  </style>

</head>

<body>

  <div class="container">

    <span class="before">1212</span>

    <span class="child">22 </span>

  </div>

</body>

</html>



可以看出，自然状态下，绝对定位元素参照标准流位置，紧邻before元素

只定义left、top不使用margin

.child{

      position: absolute;

      width: 100px;

      border:1px solid red;

      height: 100px;

      top:10px;

      left: 10px;

    }



可看出定位元素是相对于使用了定位的父级元素

只使用margin

.child{

      position: absolute;

      width: 100px;

      border:1px solid red;

      height: 100px;

      margin-left: 10px;

    }



可以看到它是根据未用position定位的before元素的边界进行margin定位的，对margin-top同样适用

margin与left/top结合

.child{

      position: absolute;

      width: 100px;

      border:1px solid red;

      height: 100px;

      margin-left: 70px;

      left: 50px;

    }



可以看出定位元素是相对于父级进行了定位的元素进行定位的，margin-left+left=120px，对margin-top同样适用

总结

1、只使用left等定位是按照上层相对定位（或绝对定位）的边界进行定位

2、只使用margin相关属性定位时按照上层标准流（或浮动）块的边界进行定位

3、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值

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

#con{

    position:absolute;

    left:50%;

    width:760px;

    margin-left:-380px;

}

使用绝对定位与margin是有道理的

绝对定位下margin的作用的更多相关文章

  1. linux下mnt目录作用

    linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...

  2. 用图片作为label，for属性IE下不起作用

    IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用. 例如: <input type="c ...

  3. 转 /etc/ld.so.conf.d/目录下文件的作用

    在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法:第一种,通过ldconfig命令    ldconfig命令的用途, 主要是在默认搜寻目录(/l ...

  4. jquery下的提交，点击按钮没反应，post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  5. xmlHttpRequest在Firefox下不起作用？

    描述: XMLHttpRequest 在IE下正常,在Firefox下不起作用. 原因: XMLHttpRequest 对象的 onreadystatechange 不会在Firefox下执行, 解放 ...

  6. /etc/ld.so.conf.d/目录下文件的作用

    在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法: 第一种,通过ldconfig命令     ldconfig命令的用途, 主要是在默认搜寻目录( ...

  7. 表格树 tableTree 高度 默认maxHeight，在isFold下不起作用，后期改值 vue-table-with-tree-grid

    表格树 tableTree 高度 默认maxHeight,在isFold下不起作用,后期改值  vue-table-with-tree-grid mounted () { this.$refs.tab ...

  8. 浅谈块元素绝对定位的margin属性

    对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的却发现不是这样的,于是对其做了些实验: 使用的HTML原始测试文件: <! ...

  9. IE6下margin时，float浮动产生双倍边距

    今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法 对元素float-left,然后 ...

随机推荐

  1. jQuery对象与DOM对象之间的转换(转)

    原文:https://www.cnblogs.com/lsy0403/p/5907084.html 什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用 ...

  2. xshell中进入PLSQL命令不能使用方向键和退格键的做法（输入后显示乱码）

    解决输入退格键为乱码的情况 输入时可以ctrl+backspace进行强制退格,或者使用下面一种方法: 在xshell的连接属性中配置,如下图红圈部分:  彻底解决方向键和退格键的一种办法(未亲测) ...

  3. 该错误的解决办法：Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1

    Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1 这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表 ...

  4. "unexpected console statement” in Node.js

    .eslintrc.js module.exports = { rules: { 'no-console': 'off', }, };

  5. DAO 四个包的建立

    一.DAO 四个包的建立,降低代码之间的耦合性? 之前写代码,都是在一个包下.代码耦合性较高,不利于后期的维护. dao(代码分层?) 有利于后期的维护代码,修改方便. com.aaa.dao 存放d ...

  6. @Autowired 基本介绍，有待丰富

    今天做项目对于@Autowired理解有点错误:过两天再来看看 转自:https://www.cnblogs.com/szlbm/p/5512931.html 什么是注解 传统的Spring做法是使用 ...

  7. ERROR 1045 (28000): Access denied for user 'xxx'@'localhost' (using password: YES)【奇葩的bug】

    #  Bug描述 今天周末,在家里学点新技术,虽然公司分配的任务没有完成(滑稽滑稽) 我先创建了一个mysql数据库,用root用户创建一个新用户,毕竟项目中使用root是非常危险的,尤其是我这样的实 ...

  8. 一种使用 sprintf 导致死机的情况

    @2019-02-26 [小记] char temp[10] float money; sprintf(temp, "0.2f", money); 以上使用方法可能导致死机,原因是 ...

  9. 图论(最短路&最小生成树)

    图论 图的定义与概念 图的分类 图,根据点数和边数可分为三种:完全图,稠密图与稀疏图. 完全图,即\(m=n^2\)的图\((m\)为边数,\(n\)为点数\()\).如: 1 1 0 1 2 1 1 ...

  10. macOS修改Dock隐藏速度

    延迟时间 修改延迟时间改为0,默认为1. defaults write com.apple.dock autohide-delay -int 0; killall Dock 修改为浮点数值,例如0.1 ...