绝对定位下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是有道理的

转载于:https://www.cnblogs.com/raind/p/10650615.html

绝对定位下margin的作用相关推荐

C语言margin的作用是,你真的懂margin吗？
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
/etc/ld.so.conf.d/目录下文件的作用
/etc/ld.so.conf.d/目录下文件的作用 2013-04-30 10:58 5835人阅读评论(0) 收藏举报分类: Linux/Unix系统管理(51) 版权声明:本文为博主原创文 ...
简要说明下maven的作用_Maven资料库–简要指南
简要说明下maven的作用什么是Maven资料库? (What is a Maven Repository?) A maven repository is a central location th ...
三极管基极下拉电阻作用
三极管基极下拉电阻作用 1)防止三极管受噪声信号的影响而产生误动作,使晶体管截止更可靠!三极管的基极不能出现悬空,当输入信号不确定时(如输入信号为高阻态时),加下拉电阻,就能使有效接地. 特别是GPI ...
defaultbutton IE11下不起作用
根本解决问题的办法,安装.net4.0FrameWork 补丁,地址点击打开链接 enter键添加表单在asp.net下有快捷的方式就是 defaultbutton,但是IE11下不起作用,原因 ...
uboot各种目录下的文件作用
uboot各种目录下的文件作用 uboot下载地址:http://ftp.denx.de/pub/u-boot/ 1.目录分布 2.目录结构变化: u-boot-2010.03及以前版本 ├── ap ...
前端学习（574）：margin无效情形之绝对定位下的非定义的方向“无效”
无效有效
mysql ibdata作用_mysql data文件夹下ibdata1 文件作用
ibdata1这个文件超级大, 查了一下, 大概的作用如下是储存的格式 INNODB类型数据状态下, ibdata用来储存文件的数据而库名的文件夹里面的那些表文件只是结构而已由于mysql4.1 ...
java的向下转型_终于搞明白向下转型的作用了,还不懂的进来看下.
该楼层疑似违规已被系统折叠隐藏此楼查看此楼之前一直搞不明白,向下转型的实际意义,虽然知道向下转型怎么写, 现在我来讲解下向下转型的实际作用,如果有错的话,大家可以指出, 如果认为我说的对的话可 ...