position: absolute | relative | fixed
值:left / right / top / bottom : 100px; (以px为单位)
- position: absolute(绝对定位)
脱离原来位置进行定位(脱离层面)(不占空间)
absolute相对与最近的有定位的父级元素进行定位,如果没有,那么相对于文档进行定位
z-index:1; 设置层数,数字越大层数越靠上 - position: relative(相对定位)
保留原来位置进行定位(占原来所占空间的大小)
relative相对于自己原来的位置进行定位
一般以relative当作标杆,用absolute进行定位,防止对后续元素的破坏
- position: fixed;(固定定位)
使元素固定在浏览器的某个位置
让一个元素在页面正中央:
div{
position:fixed;
left:50%;
top:50%; /*以左定点为移动坐标*/
width:100px;
height:100px;
background-color:red;
margin-left:-50px;
margin-top:-50px; /*分别向左,向上移动二分之一个身位*/
}
两栏布局:
一个div使用position: absolute属性,另一个div调整margin值为先前div的宽度。
注意:先写position: absolute的div使它先出生