定位以及定位的层级、长截图的方法

一、定位 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 点击下拉列表的蓝色区域，整图会出现在左下角