定位：将盒子指定到页面中的任意位置。
position 属性可以开启元素的定位
可选值：
static 没有开启定位（默认值）
relative 开启元素相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘性定位
开启定位后，通过 top right bottom left 四个属性设置元素的位置
示例如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: #c7edcc;
/* 开启元素定位 */
/* position: relative; */
/* 移动元素位置 */
/* left: 300px; */
/* top: 300px; */
/* 开启绝对定位 */
position: absolute;
/* 移动元素的位置 */
left: 100px;
top: 100px;
}
.box2 {
background-color: #fde6e0;
}
/* .father {
width: 300px;
height: 300px;
background-color: indianred;
margin-top: 100px;
margin-left: 200px; */
/* 开启定位 */
/* position: relative;
} */
.bbdbb {
width: 500px;
height: 500px;
background-color: #dce2f1;
/* 开启定位 */
position: relative;
}
.box3 {
background-color: #c7edcc;
/* 开启固定定位 */
position: fixed;
/* 移动元素位置 */
/* left: 100px;
top: 100px; */
right: 10px;
bottom: 10px;
}
.box4 {
background-color: #fde6e0;
}
.father {
width: 300px;
height: 300px;
background-color: #dce2f1;
margin-top: 100px;
margin-left: 100px;
position: relative;
}
body {
height: 5000px;
}
.box5 {
width: 1000px;
height: 80px;
background-color: #c7edcc;
margin: 100px auto 0;
/* 开启粘性定位 */
position: sticky;
/* 移动元素位置 */
top: 10px;
}
head>
<body>
<div class="box5">div>
body>
html>