absolute定位的子元素是参照定位父元素的哪部分定位的

2019年09月15日Web前端

我们都知道absolute的子元素是按照非static的父元素定位的,那具体的左上角的位置是从那边开始的呢?margin?border?padding?content? 让我们来看下吧。

absolute定位

最常见的情况莫过于这种了,

.parent {
    width100px;
    height100px;
    positionrelative;
    border1px solid #ccc;
}
.son {
    width50px;
    height50px;
    positionrelative;
    background-colorolive;
}
<div class="parent">
    <div class="son"></div>
</div>

浏览器效果如下:

可能我们一般都是这么理解的,那如果父子div都有边距或边框呢?

参照点

不设置子元素的left或top值

接下来,我们来找下左上角的参照点。

先都给父子元素增加上10px的margin、border、padding。

.parent {
    width100px;
    height100px;
    positionrelative;
    border10px solid #ccc;
    margin10px;
    padding10px;
}
.son {
    width50px;
    height50px;
    positionrelative;
    background-colorolive;
    border10px solid blue;
    margin10px;
    padding10px;
}

html结构不变,首先看下父级的效果,

我们选中了父级的content内容,发现子元素与父级的content有距离,再看下子元素的情况:

发现这部分是子元素的margin内容。

设置子元素的left或top值

假如我们给子元素中增加了left或者top值,

仅给son增加样式

.son {
    /** ... */
    left0px;
    top0px;
    /** ... */
}

实际参考位置发生了变化,

此时是按照父级的padding内容定位的。

总结

绝对定位时,子元素的左上角从margin开始。

而参考定位的父元素的左上角为:

  • 当子元素不设置top、left、right或bottom这种值时,以父元素的content开始。
  • 当设置top、left、right或bottom这种值时,以父元素的padding开始。

详细的demo见:github