定位以及定位的层级、长截图的方法
一、定位 position : static;
默认值，相当于没有定位
二、相对定位 position : relative;
- 参考物：元素本身的位置
- 移动方向和距离： left / right / top / bottom :数值 px ;
特点：移动会占位，原来的位置依然占据*
三、绝对定位 position: absolute;
- 参考物：有定位属性的祖先元素（父绝子相）
- 如果祖先元素都加了定位属性，就近原则
- 如果祖先元素中都没有加定位属性，参考浏览器窗口
- 包含块：也就是参考物，主要给移动的元素提供坐标系
- 移动方向和距离： left / right / top / bottom :数值 px /数值% ;
特点：移动后不占位（脱离文档流）*，会遮挡住后面的文字。
四、定位水平垂直居中(重要)*
（1）绝对定位的元素身上设置百分数的话是参考他的参考物
（2）加了绝对定位的元素脱离文档流后 margin: auto 会失效，没法进行自动计算了
（3）定位实现水平垂直居中
div{
positition:absolute;
left:50%;(移动到参考物的宽度中心点的右侧)
margin-left:-当前元素宽度的一半;盒子再向左移动
top:50%;(移动到参考物的高度中心点的下侧)
margin-top:-当前元素高度的一半;盒子再向上移动
}
div{
positition:absolute;
margin:auto;
left:0;right:0;top:0;bottom:0;
}
两种方法都可，任选其一
五、固定定位 position ：fixed;
- 参考物：浏览器窗口
- 移动方向和距离left/top/right/bottom:数值px/数值%
特点：
- 不会跟随滚动条滚动
- 脱离文档流，也会挡住后面的文字
- margin：auto 会失效，可以用绝对定位的方法重新让起水平居中
绝对定位的参考物：有定位属性(position:relative/absolute/fixed)的祖先元素
六、粘性定位 （吸顶效果） position： sticky
- 参考物：浏览器窗口
- 移动方向和距离 top： 数值px
- 特点：
- 在元素没有达到距离浏览器顶部的值的时候，是正常元素，当达到top值之后，类似于固定定位，脱离文档流，不跟随滚动条滚动。
七、定位的层级
- 加了定位属性的元素的层级要比普通的元素层级要高
- 如果大家都加了定位属性，后面的元素层级要高
- 定位属性的层级关系 z-index :数字；默认值0
- 值越大，层级越高，越在上面显示
- 可以设置负数
- 该属性必须结合定位属性使用
八、长截图的方法
1、qq工具
ctrl+alt+a 选中?的图 滚动页面，右上角会出现缩略图，截完后，粘贴到qq聊天框
2、控制台
(1)打开控制台,ctrl+shift+p
(2)输入full 点击下拉列表的蓝色区域，整图会出现在左下角
标签：定位,截图,层级,参考,top,元素,1.9,移动 来源： https://blog.csdn.net/m0_65273419/article/details/122052306
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。