CSS定位和布局的区别
定位是垂直于平面的,布局是基于屏幕平面上的
一个div的分层
内联子元素
浮动元素
块级子元素
border
background
浮动元素会脱离文档流，会比其它元素高一点点，但是比文字低，文字最高
文字最高，但是会按出现的先后顺序，后出现的高
position
用于指定一个元素在文档流中的位置，有五个取值
static 默认值,待在文档流里
position:static;
relative 相对定位,升起来一点,但不脱离文档流;原来在的位置不变,显示的位置偏离
position:relative;
top:10px;
lest:10px;
用于给 aboslute元素做爸爸，配合 z-index 使用（相对定位）
z-index属性，制定了一个具有定位属性的元素以及其子代元素的z-order
当元素之间重叠时候，z-order决定哪个元素覆盖在其余元素的上方
每一个元素的 z-index 默认值都是 auto
z-index:auto; auto计算出来的值是0，但不能直接写0
z-index:0/1/2/; 出现在内联子元素上面（文字上面）
z-index:-1/-2/-3; 出现在background下面
absolute 绝对定位,定位基准是祖先里的非staic元素
在它要定位的祖先元素上加position:relative;才能绝对定位，是基于这个祖先进行绝对定位
使用场景:脱离原来位置,另起一层,比如对话框的关闭按钮，鼠标提示等；
配合 z-index 使用（右上角的关闭键，鼠标悬浮提示代码）
练习代码：http://js.jirengu.com/kidor/1/edit?html,css,output
button span{display:none;}button 里面的span默认看不见
button:hover span{display:inline-block;} 鼠标悬浮时，显示span
定位absolute相对于它的祖先元素中最近的一个定位元素进行定位的
（position不是static就是定位元素）
有人认为absolute是相对于revative的绝对定位
有些些浏览器不写top/left会位置错乱
left:100%;
left:50%;
transfrom:translateX(-50%);（加负margin 居中）
fixed 固定定位，定位基准是viewport（有诈）
相对于视口定位（可以看见的区域）
使用场景：烦人的广告，回到顶部按钮
配合z-index使用（手机上别用这个属性，坑多）
坑在哪：如果position:fixed;
所在的那个元素的container有一些特殊属性(transform:scale(0.9);)
练习代码：http://js.jirengu.com/hawuq/1/edit?html,css,output
sticky 粘滞定位
开始时按文档流排序，下滑是会粘在屏幕上方
很多浏览器不支持
层叠上下文
如果对一个元素使用了position,那么这个元素就出现在定位元素上
z-index:1/2/3，以文字为基准，z-index:-1/-2/-3，以background为基准
每一个层叠上下文都是一个新的小世界，这个小世界里的z-index跟外界的无关
处在同一个小世界的z-index才能比较
层叠上下文练习代码：http://js.jirengu.com/tijar/1/edit?html,css,output
详细资料点击：定位元素 position
