一、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
100px;
height:100px;
background-color:red;
}
二、relative定位参数
position:relative; //保留原来位置进行定位
三、定位总结
absolute:
定位是相对于最近的有定位的父级定位
如果没有最近的定位的父级,那么相对于文档进行定位
relative:相对于自己原来的位置进行定位
四、定位如何使用
用relative作为参照物
用absolute作为定位
好处:减少对后续元素的破坏
五、fixed定位
以不变应万变,滚动条怎么滑动它都不动
HTML代码
<body>
<div></div>
</body>
CSS代码
div{
position:fixed;
50px;
left:0;
top:300px;
height:200px;
background-color:red;
color:#fff;
}
<br>
<br>
<br>
<br>
<br>
.
.
.
<br>
六、永久居中(屏幕正中间)
CSS代码
方法一
div{
100px;
height:100px;
background-color:red;
position:absolute;
left:50%; //只是左顶点
top:50%; //只是左顶点
margin-left:-50px;
margin-top:-50px;
}
方法二
div{
100px;
height:100px;
background-color:red;
position:fixed;
left:50%; //只是左顶点
top:50%; //只是左顶点
margin-left:-50px;
margin-top:-50px;
}