12-1 定位(相对，绝对，固定)

一相对定位

如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、

只有一个作用：父相子绝
不要使用相对定位来做压盖现象

二种现象：
1.不脱标
2.形影分离
实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>相对定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         .box1{
12             background-color: red;
13         }
14         .box2{
15             background-color: black;
16             position: relative;
17             top: 200px;
18             left: 0px;
19         }
20         .box3{
21             background-color: yellow;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="box1"></div>
27 <div class="box2"></div>
28 <div class="box3"></div>
29 </body>
30 </html>

View Code

二绝对定位

现象：
   1.设置绝对定位的盒子，脱离标准流
参考点：

   一、单独一个绝对定位的盒子

   1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
   2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）

   二、以父辈盒子作为参考点
   1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

   2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

   3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

   注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，
   影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，
   不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

   还要注意，绝对定位的盒子无视父辈的padding
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。
当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，
实现绝对定位盒子居中
实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绝对定位</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .father{
12             width: 500px;
13             height: 500px;
14             background-color: green;
15             position: relative;
16             /*向下走50px*/
17             top: 50px;
18             /*向右走100px*/
19             left: 100px;
20 
21         }
22         .father2{
23             width: 300px;
24             height: 300px;
25             background-color: yellow;
26             position: relative;
27             padding: 30px;
28             margin-left: 30px;
29             /*top: 10px;*/
30             /*left: 10px;*/
31         }
32         .box1{
33 
34 
35             width: 200px;
36             height: 200px;
37             background-color: red;
38             position: absolute;
39             top: 10px;
40             left: 10px;
41         }
42 
43     </style>
44 </head>
45 <body style="height: 2000px">
46 <div class="father">
47         <div class="father2">
48             <div class="box1">
49 
50             </div>
51         </div>
52 </div>
53 
54 
55 </body>
56 </html>

View Code

三固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 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         }
12         body{
13             padding-top: 80px;
14         }
15         .head{
16             width: 100%;
17             height: 80px;
18             background-color: rgba(0,0,0,.5);
19             position:fixed;
20             top: 0;
21             left: 0;
22             z-index: 999;
23         }
24         .head p{
25              margin-left: 600px;
26         }
27         .wrapper{
28             width:100%;
29             height: 500px;
30             background-color: red;
31         }
32         .top{
33             width: 100px;
34             height: 100px;
35             background-color: black;
36             position: fixed;
37             bottom: 20px;
38             right: 20px;
39             line-height: 100px;
40             text-align: center;
41         }
42         body{
43             height: 2000px;
44         }
45 
46     </style>
47 </head>
48 <body>
49     <div class="head">
50         <p>导航栏</p>
51     </div>
52     <div class="wrapper">
53         中心内容
54         <p style="position: absolute; color: black;background-color: white;"></p>
55     </div>
56     <a href="#">
57         <div class="top">
58             返回顶部
59         </div>
60     </a>
61     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8">
62 
63     </script>
64 
65     <script type="text/javascript">
66         $('.top').click(function(){
67             $('html,body').animate({
68                 scrollTop: '0'
69             },2000);
70 
71             });
72 
73 
74 
75 
76 
77     </script>
78 </body>
79 </html>

View Code

四父相子绝案例

 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         input,button{
12             outline: none;
13             border: 0;
14         }
15         .search{
16             width: 296px;
17             height: 48px;
18             margin-left: 1000px;
19             margin-top: 81px;
20         }
21         .search form{
22             position: relative;
23         }
24         .search input[type='text']{
25             width: 223px;
26             height: 48px;
27             font-size: 14px;
28             border: 1px solid #e0e0e0;
29             padding: 0 5px;
30             position: absolute;
31         }
32         .search span{
33             font-size: 12px;
34             background: #EEEEEE;
35             padding: 0 5px;
36             position: absolute;
37             top:0;
38             right: 0;
39         }
40         .search span.t{
41             top: 20px;
42             right: 162px;
43             z-index: 2;
44 
45         }
46         .search span.s{
47             top: 20px;
48             right: 83px;
49             z-index: auto;
50         }
51         .search input[type='submit']{
52             height: 50px;
53             width: 50px;
54             border: 1px solid #e0e0e0;
55             background: #fff;
56             position: absolute;
57             right: 12px;
58             top: 0px;
59         }
60     </style>
61 </head>
62 <body>
63 <div class="search">
64     <form>
65         <input type="text" name=""><input type="submit" value="按钮">
66         <span class="t">小米8</span>
67         <span class="s">小米MIX 2s</span>
68 
69     </form>
70 </div>
71 
72 </body>
73 </html>

View Code

五 z-index

<!--1.z-index 值表示谁压着谁，数值大的压盖住数值小的，-->
<!--2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，-->
<!--而浮动元素不能使用z-index-->
<!--3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，-->
<!--那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。-->
实例：z-index优先级判断

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>z-index优先级</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin:0;
10         }
11         .box{
12             width: 500px;
13             height: 500px;
14             background-color: red;
15 
16             position: absolute;
17             left: 50%;
18             margin-left: -250px;
19             z-index: 20;
20         }
21         .box1{
22                 width: 300px;
23             height: 300px;
24             background-color: green;
25             position: absolute;
26             left: 50%;
27             margin-left: -150px;
28             z-index: 100;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="box"></div>
34     <div class="box1"></div>
35 
36 </body>
37 </html>

View Code

实例2 从父现象

<!--从父现象：父亲怂了，儿子再牛逼也没用,儿子的z-index会优先继承父类的z-index-->

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>z-index从父现象</title>
 6     <style>
 7         .father1{
 8             position: relative;
 9             z-index: 20;
10         }
11         .father2{
12             position: relative;
13             z-index: 3;
14         }
15         .box{
16             width: 500px;
17             height: 500px;
18             background-color: red;
19 
20             position: absolute;
21             left: 50%;
22             margin-left: -250px;
23             z-index: 20;
24         }
25         .box2{
26             width: 300px;
27             height: 300px;
28             background-color: green;
29             position: absolute;
30             left: 50%;
31             margin-left: -150px;
32             z-index: 1000000;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="father1">
38         <div class="box">
39 
40         </div>
41 
42     </div>
43 
44     <div class="father2">
45         <div class="box2">
46 
47         </div>
48     </div>
49 
50 </body>
51 </html>

View Code

posted @ 2018-07-11 15:13 huningfei 阅读(279) 评论(0) 编辑收藏举报

刷新页面返回顶部

滴水可以穿石

一个爱好历史的运维

12-1 定位(相对，绝对，固定)

公告