day06

通栏效果

从左到右占满

绝对定位：

特点：

1.脱标,在网页中不占位置
2.参照有定位的父辈级(不包括静态定位)进行位置移动,如果父辈级身上全部没有定位
3.配合方向词移动,相对方向的方向词同时出现,优先执行left top

父相子绝：

父级加相对定位，子级加绝对定位

方向词：left top right bottom四个方向

借用了父的占位置,和子级的不占位置,便于页面的排版自上而下

显示优先级：

标准流<浮动<定位

特殊情况:

 当父辈机身上已经有了定位的时候,无需强制修改为父相子绝的状态,直接进行定位即可

定位的层级:

场景:父级有两个子级,两个子级都是绝对定位,他们层级一样,但是显示的优先级参照标签顺序判断,

标签在后的优先显示(缺陷太大,不这么做)

解决方法:给想要优先显示的的设置z-index:1;

设置显示层级只能给定位施加

定位居中

遮罩效果:

固定定位---死心眼性定位

特点:

1.(脱标)在网页中不占位置

2.参照浏览器可视区域进行位置移动

3.配合方向词进行位移

应用场景:返回顶部

a标签的锚点跳转

场景二:手机联系人abcd.....

粘性定位:

特点:

1.惊醒网页顶部吸附滚动,在静止状态占位,在滚动状态不占位

2.只配合方向词top进行位置的判断(距离窗口顶部的距离)

3.粘性定位在一开始占位置,滚动后,就不占位了

固定定位,在始终不占位置