绝对定位下margin的作用
以前一直对绝对定位下的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的作用的更多相关文章
- linux下mnt目录作用
linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...
- 用图片作为label，for属性IE下不起作用
IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用. 例如: <input type="c ...
- 转 /etc/ld.so.conf.d/目录下文件的作用
在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法:第一种,通过ldconfig命令 ldconfig命令的用途, 主要是在默认搜寻目录(/l ...
- jquery下的提交，点击按钮没反应，post方法不执行 JSON方式在FORM表单下不起作用
jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
- xmlHttpRequest在Firefox下不起作用？
描述: XMLHttpRequest 在IE下正常,在Firefox下不起作用. 原因: XMLHttpRequest 对象的 onreadystatechange 不会在Firefox下执行, 解放 ...
- /etc/ld.so.conf.d/目录下文件的作用
在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法: 第一种,通过ldconfig命令 ldconfig命令的用途, 主要是在默认搜寻目录( ...
- 表格树 tableTree 高度 默认maxHeight，在isFold下不起作用，后期改值 vue-table-with-tree-grid
表格树 tableTree 高度 默认maxHeight,在isFold下不起作用,后期改值 vue-table-with-tree-grid mounted () { this.$refs.tab ...
- 浅谈块元素绝对定位的margin属性
对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的却发现不是这样的,于是对其做了些实验: 使用的HTML原始测试文件: <! ...
- IE6下margin时，float浮动产生双倍边距
今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法 对元素float-left,然后 ...
随机推荐
- MySQL备份恢复-mysqldump原理
+++++++++++++++++++++++++++++++++++++++++++标题:mysqldump对MySQL数据库备份恢复原理时间:2019年2月23日内容:mysqldump工具重点: ...
- EQueue
EQueue 2.3.2版本发布(支持高可用) - dotNET跨平台 - CSDN博客https://blog.csdn.net/sD7O95O/article/details/78097193 E ...
- Python中数学函数
1.不需要引入math模块的有: abs(),cmp(),max(),min(),pow(),round() 2.需要引入math模块的: 三角函数,及其他数学函数,fabs(), *需要特别注意: ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- Shell命令-文件及目录操作之cp、find
文件及目录操作 - cp.find 1.cp:复制文件或目录 cp命令的功能说明 cp命令用于复制文件或目录. cp命令的语法格式 cp [OPTION]... SOURCE... DIRECTORY ...
- P1313 计算系数 HMR大佬讲解
今天,HMR大佬给我们讲解了这一道难题. 这道题明显的二项式定理,自然想到了要用到杨辉三角了.基本思路就是先用for循环求出杨辉三角,这样就求出了x的n次方的系数和y的m次方的系数. 这是大佬的AC代 ...
- [NOI2018]屠龙勇士
题目描述 题解 考虑增量法. 假设我们已经做完了前k个条件,前面的模数连乘起来的结果为M,答案为X,当前的攻击力为x,龙的血量为a. 那么我们这一次的答案的表达形式是X+t*M的. 这一次需要满足的是 ...
- SQL---mysql新增字段
) DEFAULT NULL COMMENT '姓名' 修改表 people 增加字段 name 长度100 默认为null 备注:姓名
- 第十三节：实际开发中使用最多的监视锁Monitor、lock语法糖的扩展、混合锁的使用(ManualResetEvent、SemaphoreSlim、ReaderWriterLockSlim)
一. 监视锁(Monitor和lock) 1. Monitor类,限定线程个数的一把锁,两个核心方法: Enter:锁住某个资源. Exit:退出某一个资源. 测试案例:开启5个线程同时对一个变量进行 ...
- [再寄小读者之数学篇](2014-06-22 发散级数 [中国科学技术大学2012年高等数学B考研试题])
设 $a_n>0$, $S_n=a_1+a_2+\cdots+a_n$, 级数 $\dps{\vsm{n}a_n}$ 发散, 证明: $\dps{\vsm{n}\cfrac{a_n}{S_n}} ...