绝对定位元素的margin如何设置

写在前面：
这篇文章其实还是没有谈到为什么绝对定位元素可以设置margin，以及为什么margin设置时的参照物是经过绝对定位后的位置，但是阅读后可以快速掌握绝对定位下的margin应该怎么设置。

1. 总体规则

对于绝对定位元素

若设置了top和left，则margin-top和margin-left有移动效果

设置margin-bottom和margin-right会占据空间，但是无移动效果

若设置了bottom和right，则margin-bottom和margin-right有移动效果

设置margin-top和margin-left会占据空间，但是无移动效果
设置margin时的参照物为，在定位结束后的位置

2. 关于position：absolute确定具体位置时的细节

把top，bottom，right，left看成坐标轴，坐标轴围成的范围是在设置数值时的参照物

eg1.设置top，left

eg2.设置bottom，right

3. 绝对定位后，设置margin，margin的参照物

定位后，设置前：

定位后，设置后：

无明显效果，但是会占据空间

设置后相对与参照线进行移动，正负都可以

4. 实例

.a{width: 200px;height: 200px;position: relative;background-color: black;margin: 100px;}
.b{position: absolute;width: 50px;height: 50px;bottom: 100%;right: 50%;background-color: red;margin-left: 0px;margin-right: -15px;margin-top: 0px;margin-bottom: 15px;}

 <div class="a"><div class="b"></div></div>

若文章有误，欢迎指正

绝对定位元素的margin如何设置相关推荐

绝对定位元素设置水平居中
需求:有时页面内的一些容器需要定位在特定的某个位置,但是需要容器在水平方向上面居中显示,比如页面内的一个背景图里面放置一个容器,使用margin-top不方便,就决定使用绝对定位来设置. 实现方法: ...
margin:auto实现绝对定位元素的水平垂直居中
1.绝对定位元素的居中实现的一般方法兼容性不错的主流用法是: 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. CSS3的兴 ...
html绝对定位怎么页面居中,绝对定位元素设置水平居中
需求:有时页面内的一些容器需要定位在特定的某个位置,但是需要容器在水平方向上面居中显示,比如页面内的一个背景图里面放置一个容器,使用margin-top不方便,就决定使用绝对定位来设置. 实现方法: ...
【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
文章目录一.问题提出二.绝对定位居中设置 1.设置固定尺寸 2.先偏移50%再回退固定值三.绝对定位元素水平 / 垂直居中一.问题提出绝对定位不能通过设置 margin: auto ...
绝对定位元素的百分比margin
绝对定位元素的百分比margin是相对于第一个定位元素祖先元素(relative/absolute/fixed)的宽度(width)计算的橙色的宽度(width)为1000px, 蓝色的宽度(wid ...
CSS元素的width和水平margin的设置
如果没有设置box-sizing为其他值,元素默认的width是指其content box的宽度. 只有width,height和margin可以设置为auto,padding和border必须设定为 ...
CSS之定位（绝对定位元素的布局）
绝对定位元素的布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
html如何用百分比绝对定位,绝对定位元素的宽度百分比是多少？
我绝对定位的元素被设置为100%的宽度,但即便如此,当它呈现时,它会创建一个水平滚动条并超出页面的边界.上面静态定位的元素在浏览器中查看时看起来更短,即使它们也跨越了整个宽度.绝对定位元素的宽度百分比 ...