CSS 定位

一、元素定位

定位模式是否脱标移动位置是否常用
static(静态定位)不脱标不能使用边偏移很少
relative(相对定位)不脱标(占有位置)相对自身位置移动常用
absolute(绝对定位)脱标(不占有位置)带有定位的父级常用
fixed(固定定位)脱标(不占有位置)浏览器可视区常用
sticky(粘性定位)不脱标(占有位置)浏览器可视区当前阶段少

1. 定位的组成

定位 : 将盒子定在某个位置,所以 定位也是在摆放盒子,按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式:指定一个元素在文档中的定位方式
边偏移 : 决定了该元素的最终位置

语法:

1
position: static | relative | absolute | fixed

定位模式:
参数含义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘性定位
边偏移:
边偏移属性示例描述
toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量,定义元素相对于其父元素右边线的距离

2. 静态定位(static)

语法:

1
2
3
选择器 {
position: static;
}

特性:

  1. 静态定位按照标准流特性摆放,没有边偏移
  2. 使用相对较少

3. 相对定位(relative)

相对定位: 元素在移动位置的时候,是相对于它 原来的位置 来说的

语法:

1
2
3
选择器 {
position: relative;
}

特性:

  1. 以它原来的位置为参考移动;
  2. 他移动后原来的位置不会被占据,仍然保留(不脱标);
  3. 边偏移的距离是以移动后的位置距离原来的位置来计算的,如:left:100px,说明向右移动100像素,原来位置在它的左侧
代码示例
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
position: relative;
left: 100px;
width: 200px;
height: 200px;
background-color: rgba(228, 31, 228, 0.8);
}
.box2{
width: 200px;
height: 200px;
background-color: rgba(43, 185, 228, 0.8);
}
</style>
</head>
<body>
<div class="box1">相对定位</div>
<div class="box2"></div>

</body>
</html>

4. 绝对定位(absolute)

绝对定位: 元素在移动位置的时候,是相对于它祖先元素来说的

语法:

1
2
3
选择器 {
position: absolute;
}

特点:

  1. 如果没有父元素或父元素没有定位,则以浏览器为准定位;
  2. 如果祖先元素有定位(相对、绝对、固定定位),则以有点位的最近一级祖先元素为参考点一定位置
  3. 绝对定位不再占有原来的位置(脱标
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: rgba(228, 31, 228, 0.8);
}

.box2 {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 200px;
background-color: rgba(43, 185, 228, 0.8);
}

.box3 {
position: absolute;
right: 10px;
bottom: 10px;
width: 100px;
height: 100px;
background-color: rgba(233, 229, 8, 0.8);
}
</style>
</head>

<body>
<div class="box1">
<div class="box2">先祖元素没有定位时,以浏览器为基准 <div class="box3">先祖元素有定位时,以先祖元素为基准</div>
</div>
</div>
</body>

</html>

5. 子绝父相

子绝父相: 子元素绝对定位,父元素相对定位

特点:

  1. 子级绝对定位,不占有位置,可以放到父盒子里的任何位置,不影响其他的兄弟盒子
  2. 父盒子需要加定位限制子盒子的活动范围
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
}
.box-bd ul li {
position: relative;
float: left;
width: 228px;
height: 230px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
border: 1px solid red;
}
.box-bd ul li>img {
width: 100%;
}
.box-bd ul li em {
position: absolute;
top: 4px;
right: -6px;
}
</style>
</head>

<body>
<div class="box-bd">
<ul class="clearfix">
<li>
<em>
<img src="https://img.pupper.cn/img/202111231118389.png" alt="">
</em>
<img src="https://img.pupper.cn/img/202111231118957.png" alt="">
<h4>子绝父相</h4>
</li>
</ul>
</div>

</body>

</html>

6. 固定定位(fixed)

固定定位: 将元素固定在浏览器中的某个位置

语法:

1
2
3
选择器 {
position: fixed;
}

特点:

  1. 以浏览器的可是窗口为参照点移动元素
    1. 跟父元素没有任何关系
    2. 不随滚动条滚动
  2. 不占用原来的位置(脱标)
    1. 可以看做是一种特殊的绝对定位

示例:
将元素固定到版心右侧:先固定到浏览器的一般宽度,在使用margin 移动版心一半的宽度

代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
}
.box-bd ul li {
margin: 0 auto;
width: 500px;
height: 1500
px;
background-color: #fff;
border: 1px solid red;
}
.box-bd ul li>img {
width: 100%;
height: 1500px;
}
.box-bd ul li em {
position: fixed;

top: 500px;
left: 50%;

margin-left: 275px;
}
</style>
</head>

<body>
<div class="box-bd">
<ul class="clearfix">
<li>
<em>
<img src="https://img.pupper.cn/img/202111231118389.png" alt="">
</em>
<img src="https://img.pupper.cn/img/202111231118957.png" alt="">
</li>
</ul>
</div>

</body>

</html>

7. 粘性定位(sticky)

粘性定位: 相对定位与固定定位的混合

语法:

1
2
3
选择器 {
position: sticky;
}

特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位的特点)
  2. 占有原来的位置(相对定位的特点)
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
border: 1px solid red;
}

.nav {
position: sticky;
top: 0;
width: 800px;
height: 50px;
margin: 100px auto;
background-color: rgb(82, 79, 79);
color: #fff;
font-size: 40px;
text-align: center;
}
</style>
</head>

<body>
<div class="nav">
这是粘性定位
</div>

</body>

</html>

二、定位的特性

1. 定位的叠放次序(z-index)

z-index:用于控制盒子的在使用定位时的盒子叠放顺序

语法:

1
2
3
4
5
/* 数值可以是正整数、负整数 和 0 */

选择器 {
z-index: 1;
}

特点:

  1. 数值可以是正整数、负整数 和 0,数值越大,盒子越靠上,数字后不能加单位
  2. 如果值相同,则按书写的先后顺序来排列,最后写的在最上方
  3. 只有定位的盒子才有 z-index 属性
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 200px;
}
.nav1 {
position: absolute;
top: 40px;
left: 40px;
z-index: 1;
background-color: rgb(129, 78, 127);
}
.nav2 {
position: absolute;
top: 20px;
left: 20px;
z-index: 0;
background-color: rgb(199, 230, 26);
}
.nav3 {
background-color: rgb(6, 230, 200);
}

</style>
</head>

<body>
<div class="box nav1">1</div>
<div class="box nav2">2</div>
<div class="box nav3">3</div>

</body>

</html>

2. 绝对定位盒子水平居中

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中:

  1. left: 50%; : 让盒子在左侧移动到父元素的水平中心位置
  2. margin-left: -100px;: 让盒子向左移动自身宽度的一半。
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav1 {
position: relative;
width: 300px;
height: 300px;
background-color: rgb(129, 78, 127);
}

.nav2 {
width: 100px;
height: 50px;
position: absolute;
background-color: rgb(199, 230, 26);
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -25px;
}
</style>
</head>

<body>
<div class="box nav1">
<div class="box nav2">绝对定位盒子水平居中</div>
</div>
</body>
</html>

3. 拓展

绝对定位和固定定位也和浮动类似:

  1. 行内元素 添加绝对或者固定定位,可以直接设置 高度 和 宽度;
  2. 块级元素 添加绝对或固定定位,如果 不给 宽度或高度,默认大小是 内容的大小
  3. 浮动元素 只会压住它下面标准流的盒子,不会压住标准流盒子里的文字或图片(文字环绕效果
  4. 固定定位(绝对定位)会压住下面标准流所有的内容

案例(banner)

代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
position: relative;
width: 520px;
height: 280px;
margin: 20px auto;
}
li {
list-style: none;
}
.banner img {
width: 520px;
height: 280px;
}
.prev,
.next {
position: absolute;
width: 20px;
height: 30px;
top: 50%;
margin-top: -15px;
text-decoration: none;
color: #fff;
background-color: rgba(255, 252, 252, 0.3);
line-height: 30px;
}
.prev {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
right: 0;
text-align: right;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
width: 70px;
height: 14px;
background-color: rgba(255, 252, 252, 0.3);
left: 50%;
margin-left: -35px;
border-radius: 7px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
border-radius: 5px;
background-color: #fff;
margin: 3px;
}
.promo-nav .one {
background-color: red;
}
</style>
</head>

<body>
<div class="banner">
<img src="https://img.pupper.cn/img/202111241153035.jpg" alt="">
<a href="#" class="prev"> &lt; </a>
<a href="#" class="next"> &gt; </a>
<ul class="promo-nav">
<li class="one"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

三、元素的显示与隐藏

1. 元素的显示与隐藏

属性说明
display: block除了转换为块元素外,同时还有显示元素的意思
display: none隐藏元素(不占有 原来的位置)
visibility: visible显示元素
visibility: hidden隐藏元素(占有 原来的位置)
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.demo1,
.demo2 {

width: 400px;
height: 200px;
}
.demo1 {
border: 2px solid greenyellow;
}
.demo2 {
border: 2px solid red;
}
.demo1 div {
display: inline-block;
width: 150px;
height: 150px;
}
.demo1 .box1 {
display: none;
background-color: rgb(156, 155, 155);
}
.demo1 .box2 {
background-color: rgb(231, 151, 151);
}
.demo2 div {
display: inline-block;
width: 150px;
height: 150px;
}
.demo2 .box1 {
visibility: hidden;
background-color: rgb(156, 155, 155);
}
.demo2 .box2 {
background-color: rgb(231, 151, 151);
}

</style>
</head>

<body>
<div class="demo1">
<div class="box1"></div>
<div class="box2"></div>
<p>display: none; 隐藏元素(**不占有** 原来的位置)</p>
</div>
<div class="demo2">
<div class="box1"></div>
<div class="box2"></div>
<p>visibility: hidden;隐藏元素(**占有** 原来的位置)</p>
</div>
</body>
</html>

2. 隐藏溢出 (overflow)

overflow : 用于设置如果溢出一个元素框(超过高度或宽度)时,元素是否隐藏

属性值描述
visible不隐藏溢出内容
hidden隐藏溢出内容
scroll总显示滚动条
auto超出时显示滚动条

如果盒子有定位属性,不建议使用 overflow: hidden;,会将所有溢出全部隐藏,不方便布局

案例二

代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.demo1 {
position: relative;
width: 520px;
height: 280px;
margin: 20px auto;
}
.demo1 img {
width: 520px;
height: 280px;
}
#play {
display: none;
position: absolute;
top: 0;
left: 0;
width: 520px;
height: 280px;
background: rgba(0, 0, 0, 0.5) url(https://img.pupper.cn/img/202111241329939.png) no-repeat center;
}
.demo1:hover #play {
display: block;
}

</style>
</head>

<body>
<div class="demo1">
<div id="play"></div>
<img src="https://img.pupper.cn/img/202111241153035.jpg" >
</div>
</body>
</html>