前言
作为一个后台开发，最不爱写的就是CSS。然而有些时候还是要了解CSS。本文作为前端学习的第一篇，主要讲定位部分。position属性用来指定一个元素在网页上的位置，一共有5种定位方式
- static(默认)
- relative
- fixed
- absolute
- sticky
定义
static
static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。
absolute
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。
另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
元素的位置通过left、top、right以及bottom属性进行规定。
sticky
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。比如型表格滚动的时候，表头始终固定。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
示例
默认定位static
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</div>
</body>
</html>
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: static;
top: 20px;
left: 20px;
background: blue;
}
|
相对定位relative
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。下面的例子中，注意未应用定位的其它元素是按照 “Two” 在正常位置的情况下进行布局的。
将上述代码样式改为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
|
绝对定位absolute
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。
父元素static定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .content {
margin-left: 100px;
border: 2px solid blue;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: absolute;
top: 20px;
left: 20px;
background: blue;
}
|
父元素realtive定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .content {
margin-left: 100px;
border: 2px solid blue;
position: relative;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: absolute;
top: 20px;
left: 20px;
background: blue;
}
|
固定定位fixed
固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中，“One” 元素定位在离页面顶部 80px，离页面左侧 20px 的位置。
html
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
| <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<div class="header">Header</div>
<div class="blank"></div>
<p>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
我是内容~ <br/>
</p>
</div>
</body>
</html>
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .content {
width: 500px;
height: 200px;
overflow: scroll;
}
.header {
width: 100%;
height: 50px;
background: red;
color: white;
position: fixed;
}
p {
margin-top: 50px;
}
|
粘性布局sticky
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
html
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
| <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<dl>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</dl>
<dl>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</dl>
<dl>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</dl>
<dl>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</dl>
</div>
</body>
</html>
|
css
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
| * {
box-sizing: border-box;
}
.content {
width: 500px;
height: 200px;
overflow: scroll;
}
dl {
margin: 0;
padding: 24px 0 0 0;
}
dt {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #CCC
}
|
本文到此结束，感谢阅读。欢迎关注公众号【当我遇上你】。您的关注是我最大的动力。
参考
