定位

一. 定位介绍

　　谈到定位，顾名思义，就确定元素的位置，定位分为三种：相对定位、绝对定位、固定定位；分别用 position：relative、position：absolute、position：fixed来表示，它们分别有着不同的用法和使用场景，比如：相对定位通常用来微调元素的位置，用来做字绝父相的父亲；绝对定位用来配合元素动画的移动，用来做字绝父相的儿子；固定定位通常用来做固定在屏幕某处的案例（固定导航栏、返回顶部按钮等）。

二. 相对定位

　1.含义：相对于自己的位置进行移动。 可以简单概括为：不脱标，老家留坑，形影分离。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10             }        
11             .box1 {
12                 width: 100px;
13                 height: 100px;
14                 border: 1px solid black;
15                 background-color: red;
16             }
17             
18             .box2 {
19                 width: 100px;
20                 height: 100px;
21                 border: 1px solid black;
22                 background-color: green;
23                 position: relative;
24                 top: 200px;
25                 left: 400px;
26             }    
27             .box3 {
28                 width: 100px;
29                 height: 100px;
30                 border: 1px solid black;
31                 background-color: blue;
32             }
33         </style>
34     </head>
35     <body>
36         <!--一.相对定位 :不脱标，老家留坑，形影分离-->
37         <div class="box1"></div>
38         <div class="box2"></div>
39         <div class="box3"></div>    
40     </body>
41 </html>

View Code

效果：

　　2.用于元素位置的微调

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box4{
 8                 width: 100px;
 9                 height: 200px;
10                 border: 1px solid black;
11                 float: left;
12             }
13             body input{
14                 position: relative;
15                 top: 100px;
16                 left: 50px;
17             }
18         </style>
19     </head>
20     <body>
21         <!--一.元素的微调-->    
22         <div class="box4"></div>
23         <input type="button"  value="来微调我呀" />
24     </body>
25 </html>

View Code

　　效果：

　　3.字绝父相的长辈，不一定是父辈（详见下面绝对定位的介绍）

三. 绝对定位

　1.性质：绝对定位是脱标的，所以只要元素进行绝对定位了，无论是行内元素还是块级元素，都可以设置宽高了，不需要再设置display:block了。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             .box1 {
14                 width: 200px;
15                 height: 200px;
16                 border: 1px solid pink;
17                 background-color: red;
18             }
19             
20             .box2 {
21                 width: 200px;
22                 height: 200px;
23                 border: 1px solid pink;
24                 background-color: green;
25                 position: absolute;
26                 top: 200px;
27                 left: 300px;
28             }
29             
30             .box3 {
31                 width: 200px;
32                 height: 200px;
33                 border: 1px solid pink;
34                 background-color: blue;
35             }
36             
37             .sp1 {
38                 border: 1px solid black;
39                 width: 200px;
40                 height: 200px;
41             }
42             
43             .sp2 {
44                 border: 1px solid black;
45                 width: 200px;
46                 height: 200px;
47                 position: absolute;
48                 top: 100px;
49                 left: 100px;
50             }
51         </style>
52     </head>
53     <body>
54         <!--一.绝对定位的盒子脱标1-->
55         <div class="box1">1</div>
56         <div class="box2">2</div>
57         <div class="box3">3</div>
58         <!--二.绝对定位的盒子脱标2-->
59         <span class="sp1">哈哈1</span>
60         <!--绝对定位以后，就可以设置宽和高了-->
61         <span class="sp2">哈哈2</span>
62     </body>
63 
64 </html>

View Code

　2.绝对定位参考点1-当没有父盒子或父盒子中没有定位属性时，这时以body作为参考点

经典面试题：

　3.绝对定位参考点2-子绝父相

一个绝对定位的元素，在有父元素或爷爷或以上元素包裹时，以离他最近的有定位（相对、绝对、固定）的元素当做参考。

4.居中的性质

　　绝对定位以后，标准文档流中的居中方式：margin：0 auto ,失效了，所有要采用一个新的公式：left:50%， margin-left: 负的宽度的一半。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box1 {
 8                 width: 400px;
 9                 height: 60px;
10                 background-color: green;
11                 position: absolute;
12                 left: 50%;
13                 top: 0;
14                 margin-left: -200px;
15             }
16         </style>
17     </head>
18     <body>
19         <!--绝对定位以后，标准文档流中的居中方式：margin：0 auto ,失效了
20         所有要采用一个新的公式：left:50%  margin-left: 负的宽度的一半-->    
21         <div class="box1"></div>
22     </body>
23 
24 </html>

View Code

　四. 固定定位

　　固定定位是相对浏览器窗口进行定位，无论窗口怎么移动，固定定位的盒子相对于窗口的位置都不变.

1. 补充固定导航栏案例js版

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style>
 8             * {
 9                 margin: 0;
10                 padding: 0
11             }
12             
13             img {
14                 vertical-align: top;
15             }
16             
17             .main {
18                 margin: 0 auto;
19                 width: 1000px;
20                 margin-top: 10px;
21             }
22             
23             .fixed {
24                 position: fixed;
25                 top: 0;
26                 left: 0;
27             }
28         </style>
29         <script src="00-JS/myJs.js" type="text/javascript" charset="utf-8"></script>
30         <script type="text/javascript">
31             window.onload = function() {
32                 var nav = $('Q-nav');
33                 var navTop = nav.offsetTop;
34                 window.onscroll = function() {
35                     if(Scroll().top >= navTop) {
36                         nav.className = "nav fixed";
37                     } else {
38                         nav.className = "nav";
39                     }
40                 };
41             };
42         </script>
43     </head>
44     <body>
45         <div class="top" id="top">
46             <img src="00-Image/top.png" alt="" />
47         </div>
48         <div class="nav" id="Q-nav">
49             <img src="00-Image/nav.png" alt="" />
50         </div>
51         <div class="main">
52             <img src="00-Image/main.png" alt="" />
53         </div>
54     </body>
55 
56 </html>

View Code

2. 回到顶部案例JQuery版

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             #div1 {
 9                 height: 2000px;
10             }
11             
12             .box1 {
13                 width: 50px;
14                 height: 50px;
15                 background-color: pink;
16                 position: fixed;
17                 bottom: 20px;
18                 right: 20px;
19                 cursor: pointer;
20                 display: none;
21             }
22         </style>
23         <script src="../../00-Lib/jquery-1.11.1.min.js"></script>
24         <script type="text/javascript">
25             $(function() {
26                 //1.滚动事件
27                 $(window).on('scroll', function() {
28                     var myTop = $(document).scrollTop();
29                     if(myTop > 0) {
30                         $('.box1').show();
31                     } else {
32                         $('.box1').hide();
33                     }
34                 });
35                 //2.回到顶部事件
36                 $('.box1').on('click',function () {
37                     $(document).scrollTop(0);
38                 });
39             });
40         </script>
41     </head>
42 
43     <body>
44         <div id="div1">
45             hahah
46         </div>
47         <div class="box1">
48         </div>
49     </body>
50 
51 </html>

View Code

　 五. Z-Index

　● z-index值表示谁压着谁。数值大的压盖住数值小的。

● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

● z-index值没有单位，就是一个正整数。默认的z-index值是0。

● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就能压住别人。定位了的元素，永远能够压住没有定位的元素。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box1 {
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: pink;
11                 position: absolute;
12                 top: 400px;
13                 left: 200px;
14                 z-index: 10;
15             }
16             
17             .box2 {
18                 width: 200px;
19                 height: 200px;
20                 background-color: greenyellow;
21                 position: absolute;
22                 top: 420px;
23                 left: 250px;
24                 z-index: 9;
25             }
26         </style>
27     </head>
28     <body>
29         <!--● z-index值表示谁压着谁。数值大的压盖住数值小的。
30             ● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
31             ● z-index值没有单位，就是一个正整数。默认的z-index值是0。
32             ● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就能压住别人。定位了的元素，永远能够压住没有定位的元素。-->
33 
34         <div class="box1"></div>
35         <div class="box2"></div>
36     </body>
37 
38 </html>

View Code

z-index的从父现象：父亲之间pk，a的父亲比b的父亲的z-index大，那么b的z-index比a大无效

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .linzhiying{
12             width: 200px;
13             height: 200px;
14             background-color: blue;
15             position: relative;
16             z-index: 10;
17         }
18         .tianliang{
19             width: 200px;
20             height: 200px;
21             background-color: orange;
22             position: relative;
23             z-index: 9;
24         }
25         .kimi{
26             width: 60px;
27             height: 60px;
28             background-color: green;
29             position: absolute;
30             top: 300px;
31             left: 450px;
32             z-index: 454;
33         }
34         .cindy{
35             width: 60px;
36             height: 60px;
37             background-color: pink;
38             position: absolute;
39             top: 130px;
40             left: 490px;
41             z-index: 45454;
42         }
43     </style>
44 </head>
45 <body>
46     <!--z-index的从父现象：父亲之间pk，a的父亲比b的父亲的z-index大，那么b的z-index比a大无效-->
47     <div class="linzhiying">
48         <p class="kimi"></p>
49     </div>
50     <div class="tianliang">
51         <p class="cindy"></p>
52     </div>
53 </body>
54 </html>

View Code

posted @ 2017-02-02 19:14 Yaopengfei 阅读(635) 评论(0) 编辑收藏举报

刷新页面返回顶部

奔跑的路上

广泛汲取，用心打磨，精益求精。

定位

公告