相对定位:参考点 相对原来的位置
1.如果是一个单独的文档流盒子,及你姐设置了相对定位,和普通盒子一样
2.相对定位后,如果调整位置,会留下坑
作用:微调元素 子绝父相 提升层级
绝对定位 参考点:父盒子嵌套 如果父辈设置了相对定位,那么子盒子还是以父盒子的左上角为参考点
单个盒子设置绝对定位,如果以top描述,以页面左上角 bottom 右下
1.拖标
2.提升层级
一.
将绝对定位的盒子居中
left 50% margin-left:-宽度的一半
1 .father{ 2 100%; 3 height: 500px; 4 background: blue; 5 position: relative; 6 7 } 8 .child{ 9 400px; 10 height: 100px; 11 background: red; 12 position: absolute; 13 left: 50%; 14 margin-left: -200px; 15 16 } 17 *{ 18 padding: 0; 19 margin: 0; 20 } 21 body{ 22 font-size: 14px; 23 } 24 /*将表格默认的前面数字去掉 默认是存在的*/ 25 ul{ 26 list-style:none 27 } 28 /*将a超链接的默认下划线去掉*/ 29 a{ 30 text-decoration:none; 31 } 32 /*将输入框的默认框去掉*/ 33 input{ 34 border: 0; 35 outline: 0 36 ; 37 }
二.固定定位
position :fixed;
脱离了标准文档
参考点 是以浏览器的左上角
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: absolute; 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 42 <p>alex</p> 43 <p>alex</p> 44 <p>alex</p> 45 <p>alex</p> 46 <p>alex6</p> 47 <p>alex7</p> 48 <p>alex8</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>alex</p> 69 <p>alex</p> 70 <p>alex</p> 71 <p>alex</p> 72 <p class="active">alex6666</p> 73 <p>alex</p> 74 <p>alex</p> 75 <p>alex5</p> 76 <p>alex2</p> 77 <p>alex3</p> 78 <p>alex4</p> 79 <p>alex5</p> 80 <p>alex6</p> 81 <p>alex7</p> 82 <p>alex8</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>alex2</p> 94 <p>alex3</p> 95 <p>alex4</p> 96 <p>alex5</p> 97 <p>alex6</p> 98 <p>alex7</p> 99 <p>alex8</p> 100 <p>alex</p> 101 <p>alex</p> 102 <p>alex</p> 103 <p>alex</p> 104 <p>alex</p> 105 <p>alex</p> 106 <p>alex</p> 107 <p>alex</p> 108 <p>alex</p> 109 <p>alex</p> 110 <p>alex</p> 111 <p>alex</p> 112 <p>alex</p> 113 <p>alex</p> 114 <p>alex</p> 115 <p>alex</p> 116 <p>alex</p> 117 <p>alex</p> 118 <p>alex</p> 119 <p>alex</p> 120 <p>alex</p> 121 <p>alex</p> 122 <p>alex</p> 123 <p>alex</p> 124 <p>alex</p> 125 <p>alex</p> 126 <p>alex</p> 127 <p>alex</p> 128 <p>alex</p> 129 130 </body> 131 </html>
这里含有z-index 作为权重
z-index 表示权重
1.z-index 表示谁压着谁 数值大的压上数值小的
2. 只有定位了元素 才能有z-index 绝对 相对 固定定位都有z-index 浮动元素没有
3.z-index没有单位 就是一个正整数,默认0 如果没有 或者数值相同
那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.父亲怂了 儿子再厉害也没用
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 .father1{ 12 width: 300px; 13 height: 300px; 14 background-color: red; 15 position:relative; 16 z-index: 3; 17 } 18 .child1{ 19 width: 100px; 20 height: 100px; 21 background-color: purple; 22 position: absolute; 23 top: 280px; 24 left: 350px; 25 z-index: 20; 26 27 } 28 .father2{ 29 width: 300px; 30 height: 300px; 31 background-color: green; 32 position:relative; 33 z-index: 2; 34 } 35 .child2{ 36 width: 100px; 37 height: 100px; 38 background-color: yellow; 39 position: absolute; 40 top: 0; 41 left: 350px; 42 z-index: 21; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="father1"> 48 <div class="child1"></div> 49 </div> 50 <div class="father2"> 51 <div class="child2"></div> 52 </div> 53 54 </body> 55 </html>