一、position定位参数，配合参数left、right、top、bottom
position:absolute; //定位，脱离原来位置，进行定位
HTML代码
<body>
<div></div>
</body>
CSS代码
div{
position:absolute; //定位，脱离原来位置，进行定位
lft:100px; //right:200px; left、right不可同时出现
top:200px; //bottom:200px; 一般情况不设置底bottom
width:100px;
height:100px;
background-color:red;
}
二、relative定位参数
position:relative; //保留原来位置进行定位
三、定位总结
absolute：
定位是相对于最近的有定位的父级定位
如果没有最近的定位的父级，那么相对于文档进行定位
relative：相对于自己原来的位置进行定位
四、定位如何使用
用relative作为参照物
用absolute作为定位
好处：减少对后续元素的破坏
五、fixed定位
以不变应万变，滚动条怎么滑动它都不动
HTML代码
<body>
<div></div>
</body>
CSS代码
div{
position:fixed;
width:50px;
left:0;
top:300px;
height:200px;
background-color:red;
color:#fff;
}
<br>
<br>
<br>
<br>
<br>
.
.
.
<br>
六、永久居中（屏幕正中间）
CSS代码
方法一
div{
width:100px;
height:100px;
background-color:red;
position:absolute;
left:50%; //只是左顶点
top:50%; //只是左顶点
margin-left:-50px;
margin-top:-50px;
}
方法二
div{
width:100px;
height:100px;
background-color:red;
position:fixed;
left:50%; //只是左顶点
top:50%; //只是左顶点
margin-left:-50px;
margin-top:-50px;
}
posted on
