页面定位
<head>
<meta charset="UTF-8">
<title>定位示例</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1,
.c2,
.c3,
.c4,
.c4-father{
height: 200px;
width: 200px;
}
.c1{
background: red;
}
.c2{
background: blue;
position: relative;
left: 400px;
top: 200px;
}
.c3{
background: green;
}
.c4{
background: yellow;
position: absolute;
left:400px;
top:200px;
}
.c4-father {
background: black;
position: relative;
left: 200px;
}
.fix{
position: fixed;
background-color: blue;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="c1">a</div>
<div class="c2">b</div>
<div class="c3">c</div>
<div class="c4-father">
<div class="c4"></div>
</div>
<div class="fix">返回顶部</div>
</body>
定位
1.默认的static
2.相对定位(相对于原来的位置) relative
2.绝对定位(相对于最近一个被定位的祖宗标签)absolute
3.固定在某个位置fixed