<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box">
</div>
</div>
</div>
</body>
</html>
.wrapper{
width:200px;
height:200px;
background-color:orange;
}
.content{
width:100px;
height:100px;
background-color:black;
}
.box{
width:50px;
height:50px;
background-color:red;
}
.wrapper{
width:200px;
height:200px;
background-color:orange;
}
.content{
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
width:50px;
height:50px;
background-color:red;
}
.wrapper{
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
width:50px;
height:50px;
background-color:red;
}
.wrapper{
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
position:absolute;
left:50px;
width:50px;
height:50px;
background-color:red;
}
.wrapper{
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
position:relative;
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
position:absolute;
left:50px;
width:50px;
height:50px;
background-color:red;
}
.wrapper{
position:relative;
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
position:absolute;
left:50px;
width:50px;
height:50px;
background-color:red;
}
从最后三张图可以总结出absolute定位的特点,即子级是根据最近的有定位的父级进行定位,如果父级都没有定位,则相对于文档进行定位。而relative则相对于原来的位置定位。
.wrapper{
position:relative;
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
position:relative;
left:50px;
width:50px;
height:50px;
background-color:red;
}
.wrapper{
position:relative;
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
position:relative;
right:50px;
width:50px;
height:50px;
background-color:red;
}
根据absolute与relative两种定位技术的特性,一般将参照物定义为relative,被参照的物体定义为absolute然后进行位置参数的给出。
.wrapper{
margin-left:100px;
width:200px;
height:200px;
background-color:orange;
}
.content{
position:relative;
margin-left:100px;
width:100px;
height:100px;
background-color:black;
}
.box{
position:absolute;
left:100px;
width:50px;
height:50px;
background-color:red;
}
3.固定定位技术(fixed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
div{
position:fixed;
left:0;
top:80px;
width:50px;
height:100px;
background-color:red;
color:#fff;
}
div{
position:fixed;
left:50%;
top:50%;
width:100px;
height:100px;
background-color:red;
color:#fff;
margin-left:-50px;
margin-top:-50px;
}
无论怎么移动,它总是固定不动,对于最后一个应该考虑到自身的宽高,不然不可能完全居中,所以要添加margin-left:-50px; margin-top:-50px;