定位

定位分三种：

　　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

原文地址：https://www.cnblogs.com/897463196-a/p/11439767.html

11-定位

定位

相对定位

绝对定位

绝对定位的盒子居中

固定定位