页面制作-CSS-布局-position 2.17

1.定位

。position-设置定位方式
。top,right,bottom,left,z-index-设置位置

2.top/right/bottom/left

元素边缘距离参照物边缘的距离

3.z-index

设置元素在z轴上的排序

4.z-index 栈

5.position

。position：static | relative | absolute | fixed

6.position:relative

。仍在文档流中
。参照物为元素本身
最常用：改变该元素层级
使用场景：绝对定位元素的参照物

7.position:absolute

。默认宽度为内容宽度
。脱离文档流
。参照物为第一个定位祖先/根元素（根元素即html元素

8.轮播头图

position:relative;
position:absolute;

image.png

9.position:fixed

。默认宽度为内容宽度
。脱离文档流
。参照物为视窗

布局：固定顶栏position:fixed; top:0

布局：遮罩position:fixed; z-index:999;top:0; width:100%,height:100%//盖住整个页面

布局：三行自适应布局

.head{position:absolute; top:0; left:0; width:100%; height:100%;}
.body{position:absolute; top:100px; left:0; bottom:100px; right:0;}
.foot{position:absolute; bottom:0; left:0; width:100%; height:100px;}```