定位有三种 : html
1.相对定位 position: relative;浏览器
2.绝对定位 position: absolute;ide
3.固定定位 position: fixed;布局
相对定位 : 相对于本身原来的位置定位. position: relative;spa
现象和使用:3d
1.若是对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。code
2.设置相对定位以后,咱们才可使用四个方向的属性: top、bottom、left、righthtm
特性:blog
1.不脱标页面布局
2.形影分离
3.老家留坑(占着茅房不拉屎,恶心人)
因此说相对定位 在页面中没有什么太大的做用。影响咱们页面的布局。咱们不要使用相对定位来作压盖效果
用途:
1.微调元素位置
2.作绝对定位的参考(父相子绝)********。
3.提高层级(不建议)
参考点:
本身原来的位置作参考点。
示例:
position: absolute;
特性:
1.脱标 : 不占位置
2.作遮盖效果,提成了层级。(建议使用)
3.设置绝对定位以后,不区分行内元素和块级元素,都能设置宽高。
参考点(重点):
1、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
2、以父辈盒子做为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不必定是爸爸,它也能够是爷爷,曾爷爷。
2.若是父亲设置了定位,那么以父亲为参考点。那么若是父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不单单是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,作站的时候不会出现父绝子绝。由于绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在咱们页面布局中,是经常使用的布局方案。由于父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
还要注意,绝对定位的盒子无视父辈的padding
做用:页面布局常见的“父相子绝”!
示例 :
子绝父相---示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father{ width: 992px; height: 460px; background-color: red; float: right; position: relative; } .prev{ width: 50px; height: 50px; line-height: 50px; text-align: center; position: absolute; background-color: #000; color: #fff; top: 50%; left: 0px; } .next{ width: 50px; height: 50px; line-height: 50px; text-align: center; position: absolute; background-color: #000; color: #fff; top: 50%; right: 0; } </style> </head> <body> <div class="father"> <span class="next">></span> <span class="prev"><</span> </div> </body> </html>
绝对定位的盒子居中
1 *{ 2 padding: 0; 3 margin: 0; 4 } 5 .box{ 6 width: 100%; 7 height: 69px; 8 background: #000; 9 } 10 .box .c{ 11 width: 960px; 12 height: 69px; 13 background-color: pink; 14 /*margin: 0 auto;*/ 15 position: relative; 16 left: 50%; 17 margin-left: -480px; 18 19 /*设置绝对定位以后,margin:0 auto;不起任何做用,若是想让绝对定位的盒子居中。当作公式记下来 设置子元素绝对定位,而后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/ 20 }
固定当前的元素不会随着页面滚动而滚动 position: fixed;
特性:
1.脱标 : 不占位置
2.遮盖,提高层级
3.固定不变
参考点:
设置固定定位,用top描述。那么是以浏览器的左上角为参考点
若是用bottom描述,那么是以浏览器的左下角为参考点
做用:
1.返回顶部栏
2.固定导航栏
3.小广告