CSS-定位
定位
一般我们在css中使用相对定位就是为了移动它的位置的
定位有三种：
1.相对定位 2.绝对定位 3.固定定位
相对定位
相对定位:相对于自己原来的位置定位
现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
特性：
1.不脱标
2.形影分离
3.老家留坑（占着茅房不拉屎，恶心人）
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
参考点：
自己原来的位置做参考点。
就是以自己以前的位置来做参考点 然后相当于以前的位置进行移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <style> div{ width:200px; height:200px; background-color: red; position:relative; /*设置相对定位*/ top:30px; /*相对以前向下移动30px*/ left:30px; /*相对以前向右移动30px*/ } </style> </head> <body> <div class="wrap"> </div> </body> </html>
移动后：
我们不使用相对定位来定位是因为移动过后就会留下以前的空白很麻烦的 所以我们要用决定定位来做的
相对定位的应用：
比如当两个输入框一个变大了一个任然是原样，那么你要把两个的底框变齐的话 就需要用相对定位了，因为让小的框，相对于以前的位置进行变化，然后进行底边对其
<head> <meta charset="UTF-8"> <title>Title</title> <style> .t{ font-size: 30px; } .xiaoming{ position: relative;/*相对于以前进行定位*/ top:3px; /*然后进行底边的移动对齐*/ } </style> </head> <body> <div> <form action=""> <input type="text" class="t"> <input type="text" class="xiaoming"> </form> </div> </body>
绝对定位
特性：
1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！！
意思就是父亲的设置相对定义 儿子的设置绝对定位，儿子会随着父亲的改变而改变
父相子绝就是为了的到一个页面中的一个小标的：
效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父相子绝</title> <style> body{ padding:0; margin:0; } .banner{ width:1210px; /*height:2000px;*/ overflow:hidden; margin:0 auto; } .banner .box1{ float:left; width:310px; height:500px; background-color: red; } .banner .box2{ float:left; width: 900px; height:500px; background-color: green; position: relative;/*父亲相对定位*/ } .banner .box3{ float:left; width:40px; height:20px; background-color: blue; /*相当于父亲进行定位*/ position: absolute; top:400px; left:50px; } </style> </head> <body> <div class="banner"> <div class="box1"></div> <div class="box2"> <div class="box3"></div> </div> </div> </body> </html>
相对于父级进行改变
固定定位：
position:fixed;
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
<title>Document</title> <style> p{ height:100px; width:100px; background-color: red; position:fixed;/*设置固定的不论界面如何移动就一直固定在页面中 一直保持位置不会变的*/ bottom:0; right:50px; line-height:100px; text-align:center; } </style> </head> <body> <div> <p><a href="">回到顶部</a></p> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> <img src="./泷泽萝拉.jpg" alt=""> </div> </body>
