定位
1：标准流
-
块级元素独占一行------垂直布局
-
行内元素/行内块元素一行显示多个-----水平布局
2：浮动
让原本垂直布局的块元素变成水平布局
3：定位
-
可以让元素自由的摆放在网页的任意位置
-
用于盒子之间的层叠情况
4：使用场景
-
定位之后元素层级越高，可以层叠在其他盒子上
-
可以让盒子固定在屏幕中的某个位置
5：使用定位步骤
-
设置定位属性 psition
absolute 绝对定位
-
设置偏移值
偏移值分为两个方向，水平和垂直方向各选一个
水平 left距离左边的距离
right距离右边的距离
垂直
top距离上边的距离
bottom距离下边的距离
6:绝对定位
position:absolute
特点：
-
页面中不占位置，脱离了标准流
-
配合方位属性实现移动
-
祖先元素中没有定位， 默认相对于浏览器可视区域进行移动
祖先元素中有定位， 相对于最近的 有定位的祖先元素进行移动
7：相对定位
position: relative;
特点：
-
配合方位属性实现移动
-
相对于自己原来位置进行移动
-
在页面中占位置--没有脱标
应用场景：
-
子绝父相
-
用于小范围的移动
8：子绝父相
让子元素相对于父元素进行自由移动
含义：
-
子元素：绝对定位
-
父元素 相对定位
好处：
父元素相对定位，对页面布局影响最小
9：静态定位
静态定位是默认值，就是之前认识的标准流
position:static
-
静态定位是之前的标准流，不能通过方位属性进行移动
10:固定定位
相对于浏览器进行定位移动
position:fixed
特点:
-
配合方位属性实现移动
-
相对于浏览器进行移动
-
在页面中不占位置--脱离标准流
场景：
让盒子固定在屏幕中的某个位置
11：元素的层级关系
不同布局方式元素的层级关系
定位>浮动>标准流
不同定位之间的层级关系
-
相对，绝对，固定默认层级相同
-
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
更改定位元素的层级
z-index:数字; 数字越大，层级越高
标签：定位,层级,元素,特性,用法,相对,距离,移动 来源： https://www.cnblogs.com/YBYZ/p/16483082.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。