WEB前端初学者笔记（5）--定位

一、三种定位

使用position: ;进行定位设置

小tip：定位的时候是会有浏览器margin和padding干扰，使定位产生误差。这时就需要通配符解决*{margin：0；padding：0；}。或者在body里面设置就可以了

固定定位position: fixed;

相对于浏览器窗口定位，固定在页面一个位置，无论页面滚动条怎么滚动，始终位于窗口固定位置，脱离文本流

相对定位（大盒子使用）position: relative;

1.相对定位是指相对于原本文档流中的位置定位，也就是对于原先的位置来移动

2.不会脱离文本流，就算移动了，原先位置也会占有

3.受页面外边距影响，可以这么理解，页面大盒子有了外边距，整体都会距离页面边框有一定距离，那么定义的东西也会保持这个距离，再去相对定位的时候就会根据之前已经偏移的位置在进行定位，所以说是有影响的。

绝对定位（大盒子里的小盒子使用）position: absolute;

1.相对于离他最近的已定位的父级进行定位也就是父级元素中已经定位的元素，根据他的位置进行定位 position定义之后才算定位，如果一直没有，则就根据浏览器窗口来进行定位

2.绝对定位是根据父级来进行定位的，即使找不到父级也是根据页面边框来进行定位，所以不受到页面内外边距影响。

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title>定位</title>
 7     <style type="text/css">
 8         /**{margin: 0;padding: 0;}*/
 9         body{height: 10000px; }
10         div{width: 100px;
11             height: 100px;}
12        #guDing{
13            background: lightblue;
14            position: fixed;
15            left: 500px;
16            top: 200px;
17        }
18        #xiangDui{
19         background: red;
20            position: relative;
21            left: 100px;
22            top: 100px;
23 
24        }
25         #jueDui{
26         background: lightgreen;
27            position: absolute;
28            left: 100px;
29            top: 100px;
30 
31        }
32     </style>
33 </head>
34 <body>
35  <div id="guDing"></div>
36  <div id="xiangDui"></div>
37  <div id="jueDui"></div>
38 </body>
39 </html>

二、浮动和定位区别

就拿百度页面来说，最上边那一栏，如果用了浮动，当屏幕放大的时候，两个本应该重合的却实现了错位，当使用定位就不会出现这个问题。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title>百度</title>
 7     <style type="text/css">
 8         
 9         ul{ 
10             width: 600px;
11             height: 30px;
12             background-color: lightblue;
13             margin: 0;
14             /*position: absolute;
15             left: 0px;
16             top: 0;*/
17             display: inline-block;
18             float: left;
19         }
20         div{
21             width: 120px;
22             height: 30px;
23             background-color: lightgreen;
24             /*position: absolute;
25             right: 0px;
26             top: 0px;*/
27             display: inline-block;
28             float: right;
29         }
30 
31     </style>
32 </head>
33 <body>
34     <ul></ul>
35     <div></div>
36 
37 </body>
38 </html>