Position定位属性
position有top,bottom,left,right四个属性，可以接受的值为<length>(+长度单位(px、cm、ex...)或者<percentage>(+%).
Position定位属性相对谁偏移(以top属性为例)
MDN官方文档 MDN
- 当position设置为absolute或fixed时，top属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
- 当position设置为relative时，top属性指定了元素的上边界离开其正常位置的偏移。
- 当position设置为sticky时，如果元素在viewport里面，top属性的效果和position为relative等同；如果元素在viewport外面，top属性的效果和position为fixed等同。
- 当position设置为static时，top属性无效。
根据官方文档，定位元素参考边界是外边距边界，那么包含块的参考边界到底是content的边界，还是padding的边界，又或者是margin的边界呢?
abosolute定位：
我们以一个父元素div和一个子元素div来进行实验，父元素设定为relative和absolute皆可，子元素设定为absolute
HTML代码:
<div class="father">
<div class="son">我是子元素</div>
</div>
CSS代码:
*{
padding:0;
margin:0;
}
.father{
position:absolute;
width:200px;
height:100px;
background-color:red;
}
.son{
position:absolute;
width:100px;
height:20px;
background-color:pink;
}
设定<length>值
- father元素不设置padding,margin,设定top为10px;
.son{
top:10px;
}
看出子元素距离上端10px，但此时还不知道是否相对于哪个边界
- father元素只设置padding为20px,子元素设定top为10px;
.son{
top:10px;
}
.father{
padding:20px;
}
看出子元素距离上端10px，距离左端20px，初步断定定位元素相对于包含块的pdding边界进行偏移，下面我们再设置margin，看是否会出现不一样的现象
- father元素只设置margin为20px，子元素设定top为10px;
.father{
margin:20px;
}
.son{
top:10px;
}
看出子元素距离上端10px,距离左端0px,可以看出定位元素不相对于包含块的margin边界进行偏移
- father元素同时设置margin:20px,padding:20px,子元素设定top:10px;
.father{
margin:20px;
padding:20px;
}
.son{
top:10px;
}
看出子元素距离上端10px，距离左端20px，验证了上面的定位元素相对于包含块的padding边界进行偏移
设定<percentage>值
- father元素不设置padding,margin 子元素设置top:30%
.son{
top:30%;
}
看出子元素距离上端30px，初步判定%是按照其包含块的高度再乘以%
- father元素只设置padding为20px 子元素设置top:30%
.father{
padding:20px;
}
.son{
top:30%;
}
看出子元素距离上端42px，这里是先计算top值=父元素(padding-top+padding-bottom+height)*30%=(20+20+100)*30%=42px,然后再相对于其包含块father元素的padding边界进行偏移
- father元素只设置padding为20px 子元素设置left:30%
.father{
padding:20px;
}
.son{
left:30%;
}
看出子元素距离左端72px,这里是先计算left值=父元素(padding-left+padding-right+width)*30%=(20+20+200)=72px,然后再相对于其包含块father元素的padding边界进行偏移
总结：在绝对定位下，绝对定位元素相对于包含块元素的padding边界进行定位，而当位置属性为top,bottom且值为"<percentage>"时，将百分比的值换算成其包含块以padding为边界所形成的框的高度乘以百分比(即值=(padding-top+padding+bottom+height)乘以百分比)，当位置属性为left,right且值为"<percentage>"时，将百分比的值换算成其包含块以padding为边界所形成的框的宽度乘以百分比(即值=(padding-left+padding+right+width)乘以百分比)
具体的定位元素其包含块的边界位置和百分比运算规则可以参考MDN官方文档MDN
