` 元素开启绝对定位，并设置偏移量，具体代码如下:
```css
#d1 {
width: 500px;
height: 400px;
background-color: lightskyblue;
position: absolute;
left: 100px;
top: 0px;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
position: absolute;
left: 100px;
top: 0px;
}
```
## 固定定位
| 属性值 | 描述 |
| --- | --- |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。|
> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
固定定位是一种特殊的绝对定位，固定定位与绝对定位的区别在于:
- 固定定位始终相对于当前页面进行定位。
- 绝对定位相对于最近的祖先元素进行定位。
例如上述效果就是固定定位的一种应用方式。实现上述效果的具体代码如下:
```html
```
## 相对定位
| 属性值 | 描述 |
| --- | --- |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。|
> **值得注意的是:**
>
> - 开启相对定位的元素，不会脱离文档流。
> - 开启相对定位的元素，是相对于该元素在文档流中的定位效果。
> - 开启相对定位的元素，不会改变元素的性质。（块级元素呈现块级元素效果，内联元素呈现内联元素效果）
在 HTML 页面中定义两个 `
` 标签，并且为相邻的兄弟元素，并设置其 CSS 样式，具体代码如下:
```html
```
为第二个 `
` 元素开启相对定位，并设置偏移量，具体代码如下:
```css
position: absolute;
left: 0px;
top: 0px;
```