11-定位
程序员文章站
2023-12-29 15:25:46
定位 定位分三种： 1、相对定位； 2、绝对定位； 3、固定定位； 相对定位 相对定位：相对于自己原来的位置进行定位。 设置了相对定位，它不会脱标，层级会提高。 设置了相对定位，就能使用四个方向的left、right、top、bottom。 特性： 1、不脱标； 2、形影分离； 3、老家留坑； 绝对 ......
定位
定位分三种：
1、相对定位；
2、绝对定位；
3、固定定位；
相对定位
相对定位：相对于自己原来的位置进行定位。
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>流浪者</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 .box1{
12 width: 200px;
13 height: 200px;
14 background-color: red;
15 position: relative;
16 top: 30px;
17 left: 50px;
18 }
19 .box2{
20 width: 200px;
21 height: 200px;
22 background-color: green;
23 }
24
25 </style>
26
27 </head>
28 <body>
29
30
31 <div class="box1"></div>
32 <div class="box2"></div>
33
34
35 </body>
36 </html>
设置了相对定位，它不会脱标，层级会提高。
设置了相对定位，就能使用四个方向的left、right、top、bottom。
特性：
1、不脱标；
2、形影分离；
3、老家留坑；
绝对定位
特性：
1.脱标 2.做遮盖效果，提升了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！！
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>document</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 .box1{
12 width: 200px;
13 height: 200px;
14 background-color: red;
15 }
16 .box2{
17 width: 200px;
18 height: 200px;
19 background-color: green;
20 position: absolute;
21 top:40px;
22 left:0;
23 }
24 .box3{
25 width: 250px;
26 height: 200px;
27 background-color: blue;
28
29 }
30 </style>
31 </head>
32 <body style="height: 2000px;">
33
34 <!-- -->
35 <div class="box1"></div>
36 <div class="box2"></div>
37 <div class="box3"></div>
38
39
40 </body>
41 </html>
父相子绝实现轮播图
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>document</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 .father{
12 width: 992px;
13 height: 460px;
14 background-color: red;
15 float: right;
16 position: relative;
17 }
18 .prev{
19 width: 50px;
20 height: 50px;
21 line-height: 50px;
22 text-align: center;
23 position: absolute;
24 background-color: #000;
25 color: #fff;
26 top: 50%;
27 left: 0px;
28
29
30 }
31 .next{
32 width: 50px;
33 height: 50px;
34 line-height: 50px;
35 text-align: center;
36 position: absolute;
37 background-color: #000;
38 color: #fff;
39 top: 50%;
40 right: 0;
41 }
42
43 </style>
44 </head>
45 <body>
46
47 <div class="father">
48 <span class="next">></span>
49 <span class="prev"><</span>
50 </div>
51
52 </body>
53 </html>
绝对定位的盒子居中
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>document</title>
6 <!-- <link rel="stylesheet" href="header.css">
7 <link rel="stylesheet" href="content.css"> -->
8 <!-- <link rel="stylesheet" href="main.css"> -->
9 <style>
10 *{
11 padding: 0;
12 margin: 0;
13 }
14
15 .father{
16 width: 100%;
17 height: 200px;
18 background-color: red;
19 position: relative;
20 }
21 .box{
22 width: 400px;
23 height: 100px;
24 background-color: green;
25 position: absolute;
26
27 /**/
28 left: 50%;
29 margin-left: -200px;
30 }
31
32
33 </style>
34 </head>
35 <body>
36 <div class="father">
37 <div class="box"></div>
38 </div>
39
40 </body>
41 </html>
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>document</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 body{
12 padding-top: 80px;
13 }
14 .header{
15 width: 100%;
16 height: 80px;
17 background-color: red;
18 /*脱离了标准文档流*/
19
20 /*参考点：是以浏览器的左上角*/
21 position: fixed;
22 top:0;
23 left: 0;
24 z-index: 10000;
25
26 }
27 .active{
28 position: relative;
29
30 }
31 </style>
32 </head>
33 <body>
34
35 <div class="header"></div>
36
37 <p>alex1</p>
38 <p>alex2</p>
39 <p>alex3</p>
40 <p>alex4</p>
41 <p>alex5</p>
42 <p>alex6</p>
43 <p>alex7</p>
44 <p>alex8</p>
45 <p>alex</p>
46 <p>alex</p>
47 <p>alex</p>
48 <p>alex</p>
49 <p>alex</p>
50 <p>alex</p>
51 <p>alex</p>
52 <p>alex</p>
53 <p>alex</p>
54 <p>alex</p>
55 <p>alex</p>
56 <p>alex</p>
57 <p>alex</p>
58 <p>alex</p>
59 <p>alex</p>
60 <p>alex</p>
61 <p>alex</p>
62 <p>alex</p>
63 <p>alex</p>
64 <p>alex</p>
65 <p>alex</p>
66 <p>alex</p>
67 <p>alex</p>
68 <p class="active">alex6666</p>
69 <p>alex</p>
70 <p>alex</p>
71 <p>alex</p>
72 <p>alex</p>
73 <p>alex</p>
74 <p>alex</p>
75 <p>alex</p>
76 <p>alex</p>
77 <p>alex</p>
78 <p>alex</p>
79 <p>alex</p>
80 <p>alex</p>
81 <p>alex</p>
82 <p>alex</p>
83 <p>alex</p>
84 <p>alex</p>
85 <p>alex</p>
86 <p>alex</p>
87 <p>alex</p>
88 <p>alex</p>
89 <p>alex</p>
90 <p>alex</p>
91 <p>alex</p>
92 <p>alex</p>
93 <p>alex</p>
94
95
96 </body>
97 </html>
作者：流浪者
日期：2019-08-31