以前一直对绝对定位下的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. PS制作黑暗墙面上的漂亮霓虹文字

    一.用ps软件打开砖墙背景素材. 二.复制一层,混合模式改为“正片叠底”,不透明度50%. 三.新建色相/饱和度调整图层,设置如下.打造夜间的气氛. 四.新建一个空白图层,设置前景色黑色.背景色白色, ...

  2. 使用Nodejs在Windows上调用CMD命令

    要用nodejs执行cmd,需要引入一个包node-cmd npm install node-cmd var cmd=require('node-cmd'); cmd.get( 'notepad',/ ...

  3. 乐观锁vs悲观锁

    引言 为什么需要锁(并发控制) 在并发的环境中,会存在多个用户同时更新同一条数据,这时就会产生冲突. 冲突结果: 丢失更新:一个事务的更新覆盖了其它事务的更新结果,就是所谓的更新丢失. 脏读:当一个事 ...

  4. Oracle普通视图和物化视图的区别

    介绍 物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普通视图是虚拟表,应用的局限性大,任何对视图的查询, Oracle 都实际上转换为视图SQL语句的查询. ...

  5. Java Mail 实现第三方邮件发送功能

    1 创建一个用于发送邮件的类 package com.latiny.service; import java.io.IOException; import java.io.InputStream; i ...

  6. 如何在Eclipse中Debug调试Java代码

    背景 有的时候你想debug调试Java的源代码,就想试图在Java源代码中设置断点,在Eclipse中常常会出现Unable to insert breakpoint Absent Line Num ...

  7. java的List列表转成Tree(树形)结构列表

    直接看借鉴博客:https://blog.csdn.net/massivestars/article/details/53911620/ 由于我的业务没有父子级id两个字段,只有一个层级id字段来分层 ...

  8. Centos7 配置和链接FTP

    1:安装vsftpd组建:  yum -y install vsftpd  安装完成以后在目录/etc/vsftpd/vsftpd.conf文件是vsftp的配置文件 2:添加一个专门用来登陆vsft ...

  9. root密码重置、Linux目录结构和远程连接Linux

    一.root如何重置密码 1. 重启 Linux 系统主机并出现引导界面时,按下键盘上的 e 键进入内核编辑界面 2. 在 linux16 参数这行的最后面追加“rd.break”参数,然后按下 Ct ...

  10. Linux systemctl 命令完全指南

    Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...