使用步骤:
将需要移动的元素position属性设置为absolute。设置元素要移动的位置(top,right,bottom,left)
注意:
1.绝对定位元素会脱离文档流。
2.绝对定位元素的位置直接和父容器是否设置了相对定位(绝对定位)有直接关系。
3.绝对定位元素需要至少一个祖先元素设置了相对定位(绝对定位),不然元素定位会相对于页面的主体进行定位。
4.绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。例如,一个绝对定位的元素设置了“top”值为“50px”和一个“right”值为“100px”,绝对定位元素会相对于其设置了相对定位的父元素的顶边向下移动50px;向左移动100px。
5.若使用了绝对定位的元素并没有进行任何盒子位移属性(TRBL)设置,那么绝对定位元素的顶部和左部会和设置了相对定位(绝对定位)的父元素的顶边和左边重合。如果设置了一个盒子位移属性,比如说“top”,那么绝对定位元素垂直方向会进行移动,而水平位置默认还是左边对齐。
以百度前端学院16年春“定位和居中”为例:
灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。
Html:
<div class="main">
<div class="left-top-area"></div>
<div class="right-bottom-area"></div>
</div>
CSS
.main{
width: 400px;
height: 200px;
background: #ccc;
position: absolute;
left: 50%;
top:50%;
margin-left: -200px;
margin-top: -100px;
}
.left-top-area{
width: 50px;
height: 50px;
background: yellow;
border-radius: 0 0 50px 0;
position: absolute;
}
.right-bottom-area{
width: 50px;
height: 50px;
background: yellow;
border-radius: 50px 0 0 0;
position: absolute;
right: 0;
bottom: 0;
}
根据“绝对定位元素需要至少一个祖先元素设置了相对定位(绝对定位),不然元素定位会相对于页面的主体进行定位。”
所以main相对于body定位。
left:50%和left:50%是main块相对于body主体进行位移.此时居中的只是main块左上方的点。
为了使main整体居中,还需负Margin向左向上位移margin-left:-200px; margin-top:-100px.此时main整体垂直水平居中。
根据“若使用了绝对定位的元素并没有进行任何盒子位移属性(TRBL)设置,那么绝对定位元素的顶部和左部会和设置了相对定位(绝对定位)的父元素的顶边和左边重合”
left-top-area仅设置position:absolute,没有设置位置属性,所以相对于main块的顶边左边重合。
right-bottom-area设置了position:absolute,right:0,bottom:0.所以相对于main块右下重合