day0312

day0312

定位锚点透明

定位

使用场景：

1. 需要实现覆盖效果的时候
2. 看到有覆盖效果，且该模块在某个位置始终不动的时候，可以用（固定定位）
   返回定位，弹窗
3. 吸顶效果（非一直在顶），用粘性定位（css3新增加）

定位的所有属性值
position:static;默认值

position:absolute;
position:relative;
position:fixed;

position:sticky;

绝对定位position:absolute;

1. 文档流
   一个盒子绝对定位之后，该盒子是脱离文档流的
   也就是该盒子悬空起来，不占据浏览器的位置，后面没有定位设置的盒子，会上去被盒子盖住，后面盒子的文字内容也会被定位的盒子给盖住。所有严格来说，绝对定位是全脱离文档流
   多个盒子同时定位之后，结构中后面定位的盒子，层在最上
2. 层叠顺序
   定位之后，默认的层叠顺序，是结构在后的定位盒子层最上
   如果想要改变这样的层叠顺序，才可以用z-index
   z-index的默认数值是0，不带单位，且是整数，可以给负数
   数值越大，层越靠上，没有最大值，也没有最小

注意点：
给了绝对定位之后，只是悬空不占位而已，没有进行位置偏移

3. 用top left right bottom移动位置的时候，参照物是谁
   如果想要改变定位之后的位置，可以用top left right bottom进行设置

绝对定位参照物：

1. 默认情况下，当用top left right bottom移动位置的时候，该盒子的参照物是浏览器窗口的第1屏
2. 如果有父元素且父元素有定位设置（可以是绝对，可以是相对，可以是固定），那么再给子元素设置top left right bottom移动位置的时候，参照物就变成了父元素

相对定位position:relative;

1. 文档流
   不脱离文档流，也就是没有悬空还是占据浏览器位置

2. 层叠顺序
   如果发生了覆盖效果，那么后面定位的盒子层在最上
   还是可以通过z-index才改变

3. 用top left right bottom移动位置的时候，参照物是谁
   用top left right bottom移动位置的时候，参照物是该盒子的初始位置

注意点：
一个盒子给了相对定位之后，即使进行了位置移动，原来的空间位置还在

固定定位position:fixed

1. 文档流
   一个盒子绝对定位之后，该盒子是脱离文档流的

2. 层叠顺序
   定位之后，默认的层叠顺序，是结构在后的定位盒子层最上
   还是可以通过z-index才改变

3. 用top left right bottom移动位置的时候，参照物是谁
   固定定位之后，移动位置参照物是浏览器的当前窗口（视口）

绝对、相对、固定定位的相同和不同

相同：

1. 都是可以实现覆盖效果
2. 发生覆盖之后，都是后面定位的盒子层在最上
3. 都可以通过z-index来改变层叠顺序

不同点：

1. 文档流 绝对和固定是脱离文档流，相对是不脱离
2. 在用top left right bottom移动位置的时候，参照物
   绝对参照物：A浏览器窗口的第1屏 B有定位设置的父元素（祖先元素）
   相对参照物：自己的初始位置
   固定参照物：是浏览器的当前窗口（视口）

粘性定位position:sticky

粘性定位的效果是相对定位和固定定位的结合体
在默认的时候相对定位。当有超出的时候是固定定位

.nav{
   
	height: 50px;
	background: pink;
	position: sticky;
	top: 0;
}

使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

注意点：
想要有效果需要搭配top left right bottom属性
常用是top:0;实现吸顶效果，CSS3新增加，很多低版本浏览器不支持

包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，浏览器是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的