-
Notifications
You must be signed in to change notification settings - Fork 30
Expand file tree
/
Copy pathposition.md
More file actions
217 lines (178 loc) · 5.17 KB
/
position.md
File metadata and controls
217 lines (178 loc) · 5.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
CSS 的 position 定位属性允许自定义元素在 HTML 页面的位置，但需要先开启元素在 HTML 页面中的定位。
> **值得注意的是:** 元素在 HTML 页面中默认是不开启定位的。
CSS 定位属性提供了四种方式的定位效果:
- static: 默认值，表示元素为静态定位。
- absolute: 表示元素为绝对定位。
- fixed: 表示元素为固定定位。
- relative: 表示元素为相对定位。
当设置元素的 position 定位属性为**非默认值**时，CSS 提供了上、右、下和左四个方向的偏移量完成元素的位置设置。
- top: 表示当前元素到上边的距离。
- right: 表示当前元素到右边的距离。
- bottom: 表示当前元素到下边的距离。
- left: 表示当前元素到左边的距离。
## 绝对定位
| 属性值 | 描述 |
| --- | --- |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。|
> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
元素开启绝对定位后，与浮动效果类似:
- 元素会脱离文档流。
- 元素会呈现块级元素效果。
- 如果不设置偏移量，元素的位置不会发生变化。
### 如果元素的父元素是 `<body>` 的话，绝对定位会相对于当前页面
在 HTML 页面中定义两个 `<div>` 标签，并且为相邻的兄弟元素，并设置其 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
```
为第二个 `<div>` 元素开启绝对定位，并设置偏移量，具体代码如下:
```css
position: absolute;
left: 0px;
top: 0px;
```
> **值得注意的是:** 如果开启绝对定位的元素的父元素并不是 `<body>` 标签，但父元素没有开启任何定位的话，开启绝对定位的元素还是相对于当前页面。
### 如果元素的父元素不是 `<body>` 标签，并且开启定位的话，绝对定位会相对于父元素
在 HTML 页面中定义两个 `<div>` 标签，并且为父元素与子元素的关系，并设置其 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 500px;
height: 400px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
```
为两个 `<div>` 元素开启绝对定位，并设置偏移量，具体代码如下:
```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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0px;
height: 2000px;
}
#d1 {
width: 100%;
height: 100px;
background-color: lightskyblue;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
```
## 相对定位
| 属性值 | 描述 |
| --- | --- |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。|
> **值得注意的是:**
>
> - 开启相对定位的元素，不会脱离文档流。
> - 开启相对定位的元素，是相对于该元素在文档流中的定位效果。
> - 开启相对定位的元素，不会改变元素的性质。（块级元素呈现块级元素效果，内联元素呈现内联元素效果）
在 HTML 页面中定义两个 `<div>` 标签，并且为相邻的兄弟元素，并设置其 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 500px;
height: 400px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
```
为第二个 `<div>` 元素开启相对定位，并设置偏移量，具体代码如下:
```css
position: absolute;
left: 0px;
top: 0px;
```