定位
一、定位position组成
定义=定位模式+边偏移，
1.定位模式用于指定一个元素在文档中的定位方式
通过css的positon属性设置，其值分为四个:
静态定位：static
相对定位：relative
绝对定位：absolute
固定定位：fixed
2.边偏移决定了该元素的最终位置
top:距离父元素上边线的距离
bottom:距离父元素下边线的距离
left:距离父元素左边线的距离
right:距离父元素右边线的距离
二、相对定位
1.它是相对于自己原来的位置移动
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待
一般给绝对定位当爹
三、绝对定位
1.以自己的祖先元素对齐，当没有祖先元素或祖先元素没有定位时，以浏览器对齐
2.当祖先元素有定位时，以最近一级有定位的父级元素为准
3.不再占有原先的定位
子绝父相:
1.子级绝对定位，不会占有位置，可放到父级任意位置，并且不影响其他兄弟盒子
2.父级需要加相对定位限制子级在父盒子内显示
四、固定定位
1.以浏览器的可视窗口作为参照移动定位，跟父元素没有关系，不随滚动条滚动
2.不再占有原先的定位，与绝对定位类似
小技巧：固定在版心右侧
先让固定定位的盒子left:50%,再margin-left: 版心宽度的一半
五、粘性定位sticky
1.以浏览器的可视窗口作为参照移动定位
2.占有原先位置
3.必须添加top,bottom,left.right其中一个才有效
六、定位叠放次序z-index
1.数值可以是正负或0,默认auto,数值越大，盒子越靠上
2.如果属性值相同，后来者居上
3.数字上面上面不能用单位
4.只有定位的盒子才有次序
七、拓展
1.绝对定位的盒子不能用margin: 0 auto水平居中
解决方法：left: 50%,margin-left: 向左（负号）移动盒子自身宽度一半
垂直居中原理相同
2.定位的特殊特性
行内元素加了绝对或固定定位后，可以直接设置高宽，块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小
3.浮动，绝对固定定位不会触发塌陷问题
4.浮动不会压住盒子，定位会压住
元素的显示与隐藏
一、display
1.display: none;隐藏元素，隐藏后不再占有原来位置（常用）
2.display: block;显示元素
二、visibility
1.visibility: visible;元素可视，继续占有原来位置
2.visibility: hidden;元素隐藏
三、overflow
1.overflow: hidden;将溢出的部分隐藏
2.overflow: visible;溢出的部分显示
3.overflow: auto;只有溢出的部分显示滚动条
4.overflow: scroll;溢出不溢出都显示滚动条