# 02.定位
[toc]{type: "ol", level: [3,4]}
### html结构
```html
<div id="d1"></div>
<div id="d2">
<div id="d3"></div>
</div>
<div style="height: 3000px"></div>
<div id="d4"></div>
```
### 相对定位
- 静态(static)
> 所有标签默认都是静态的
- 相对定位(relative)
> 相对于标签原来的位置做移动
> 将标签性质变为已经定位过的标签(即使没有移动)
- 不脱离文档流
> 移动后,原来的位置不会被其他块顶替
```css
body {
margin: 0;
}
```
#### 定位前
```css
#d1 {
height: 100px;
width: 1000px;
background-color: burlywood;
}
```
![定位-相对定位-定位前](02.定位-相对定位-定位前.png)
#### 定位后
```css
#d1 {
height: 100px;
width: 1000px;
background-color: burlywood;
/*改变位置*/
position: relative;
/*从左向右移动*/
left: 100px;
/*从上向下移动*/
top: 100px;
}
```
![定位-相对定位-定位后](02.定位-相对定位-定位后.png)
### 绝对定位
> 相对于已经定位过的父标签做移动
> 没有父标签就以body为基准
#### 定位前
```css
#d1 {
height: 100px;
width: 1000px;
background-color: burlywood;
}
#d2 {
height: 100px;
width: 600px;
background-color: brown;
/*改变static状态*/
position: relative;
}
#d3 {
height: 100px;
width: 600px;
background-color: green;
}
```
![定位-绝对定位-定位前-1](02.定位-绝对定位-定位前-1.png)
![定位-绝对定位-定位前-2](02.定位-绝对定位-定位前-2.png)
#### 定位后
> #d1 #d2 不变
```css
#d3 {
height: 100px;
width: 600px;
background-color: green;
position: absolute;
left: 300px;
top: 50px;
}
```
![定位-绝对定位-定位后](02.定位-绝对定位-定位后.png)
### 固定定位
> 相对于浏览器窗口固定在某个位置
```css
#d4 {
height: 20px;
width: 100%;
background-color: burlywood;
position: fixed;
/*距离底部位置*/
bottom: 10px;
}
```
![定位-固定定位](02.定位-固定定位.png)