css专栏 04.浮动与定位 02.定位

 

# 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)