<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位和固定定位</title>
<style>
body{
height: 1000px;
}
/*绝对定位
1.在没有父级元素前提下,相对于浏览器定位
2.若父级元素存在,通常相对于父级元素定位
3.在父级范围移动
4.相对定位移动会保留原来位置,绝对定位移动不会保留原来位置
*/
.page1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0px;
bottom: 0px;
}
/*固定定位*/
.page2{
width: 50px;
height: 50px;
background-color: blue;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="page1">
div1
</div>
<div class="page2">
div2
</div>
</body>
</html>