6定位

文档流

普通流：从上至下，从左至右排列
浮动流：float:left,right
定位流：position

定位(position)

默认定位(static)

【注】添加坐标无效

相对定位(relative)

1.占据文档流
2.相对自身初始加到页面中的位置改变位置

绝对定位(absolute)

1.脱离文档流
2.默认参考根乐元素(html)改变位置
3.参考最近的有定位的父元素

固定定位(fixed)

1.脱离文档流
2.参考浏览器
3.在页面中固定不动

粘性定位(sticky)

1.结合了固定定位和相对定位的效果
2.只有left和top能识别
3.吸底效果

相对定位和绝对定位的区别

1.前者占据文档流，后者脱离文档流
2.前者参考本身，后者默认参考根元素(html)

包含块

1.嵌套关系
2.父元素是相对定位，子元素是绝对定位

层级关系(z-index:数值)

数字越大，层级越高，反之越低
可以为负
只有添加了定位的元素才能改变层级关系(默认定位static定位除外)
默认auto
并列关系：都可以改变层级关系
嵌套关系：改变子元素结构

元素在浏览器中定位居中

方式一：

position:absolute;
top:0;
bottom:0;
left:0
right:0;
margin:auto;

方式二

width:100px;
height:100px;
position:absolute;
left;50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

锚点

实现页面不同展示位置跳转
<a href="#name">点击位置</a>
<标签 id="name">跳转位置</标签>