精准定位页面中的任意元素。
固定的元素不会随着滚动条的拖动而改变位置。
position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#first
{
width:120px;
height:1800px;
border:1px solid gray;
line-height:600px;
background-color:#B7F1FF;
}
#second
{
position:fixed; /*设置元素为固定定位*/
top:30px; /*距离浏览器顶部30px*/
left:160px; /*距离浏览器左部160px*/
width:60px;
height:60px;
border:1px solid silver;
background-color:hotpink;
}
</style>
</head>
<body>
<div id="first">无定位的div元素</div>
<div id="second">固定定位的div元素</div>
</body>
</html>
该元素相对它的原始位置计算。
position:releative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
margin-top:30px;
margin-left:30px;
border:1px solid silver;
background-color: lightskyblue;
}
#father div
{
width:100px;
height:60px;
margin:10px;
background-color:hotpink;
color:white;
border:1px solid white;
}
#son2
{
/*这里设置son2的定位方式*/
postiong:relative;
top:20px;
left:40px;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">第1个无定位的div元素</div>
<div id="son2">相对定位的div元素</div>
<div id="son3">第2个无定位的div元素</div>
</div>
</body>
</html>
绝对定位的元素浮于其他元素之上，完全独立。其前后元素认为它不存在。
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
padding:15px;
background-color:#0C6A9D;
border:1px solid silver;
}
#father div{padding:10px;}
#son1{background-color:#FCD568;}
#son2
{
background-color: hotpink;
/*在这里添加son2的定位方式*/
postiong:absolute;
top:20px;
right:40px;
}
#son3{background-color: lightskyblue;}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
</html>
元素未指定position时定位，默认。
postion:static;