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

时间 2021-04-13

标签 javascript css html java jquery 浏览器 app ide 布局 spa 栏目系统网络繁體版

原文原文链接

一相对定位javascript

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

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

二种现象：
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 Codecss

二绝对定位html

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

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

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

   2、以父辈盒子做为参考点
   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 Codejava

三固定定位jquery

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

特性: app

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

参考点：布局

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

做用： 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