<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(235, 159, 159);
/* position: static; */
/* top left right bottom */
/* position: absolute;
left: 300px;
top: 100px; */
/* position: relative;
left: 30px;
top: 30px; */
position: fixed;
right: 30px;
top: 30px;
}
.d2{
background-color: rgb(231, 146, 44);
}
.d3{
background-color: rgb(180, 180, 235);
}
</style>
</head>
<body>
<!-- css定位 -->
<!-- 不设置定位的值时 是静态定位 static -->
<!-- 静态定位 就是没有定位 元素出现在该出现的位置 块级元素垂直排列 行内元素水平排列-->
<!-- 绝对定位 absolute 元素在页面上固定位置 此时会让出原来的位置 其他元素可以占用-->
<!-- 相对定位 relative 相对于原来的位置定位 定位后保留原来位置 其他元素不占用 -->
<!-- 固定定位 fixed 不会随着页面的上下移动而移动。此时会让出原来的位置 -->
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
</html>