一.position:定位属性

static:默认定位,无法改变位置

absolute:
1.绝对定位,脱离文档流
2.能修改定位坐标
3.默认参考浏览器或者参考最近的有定位的父级元素,默认定位除外

relative:相对定位
1.占据文档流
2.参考自身加载到页面中的初始位置

fixed:固定定位
1.脱离文档流
2.参考的是浏览器的可视窗口

sticky:粘性定位
1.相对离自己最近且有滚动条的父元素做的定位
2.结合相对定位和固定定位的特征
3.修改left top的值

二.定位属性的层级关系

z-index:auto/number 设置定位对象的层叠顺序
[注]1.只有添加了定位的元素才能修改层级关系,默认定位除外
2.数值越大,层级越大,反之越低
3.可以为负数
4.并列关系:都可以修改层级关系
5.嵌套关系:只有子元素可以修改

三.包含块的概念及作用

1.嵌套关系,父元素设置position:relative;
2.子元素设置position:absolute;

四绝对定位与相对定位的区别

1.前者脱离文档流,后者不脱离
2.前者参考的是浏览器或最近有定位的父元素,后者参考自身加载到浏览器的最初位置

五.定位居中

方式一: position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;

方式二:position:absolute;
left:50%;
margin-left:(负)元素宽度的一半
top:50%;
margin-top:(负)元素高度的一半

六.锚点:控制在同一个页面中进行跳转

1.跳转到的地方:<div id="box"></div>  
    2.点击按钮:<a href="#box">点击回到顶部</a>  
    3.注意  
        - 锚点只能用[a标签]控制  
        - 跳转的地方只能用id

七.透明度opacity

文字和背景颜色一起透明

opacity:0.5;
filter:alpha(opacity=50);

六.BFC:格式化上下文,一个特殊的盒子

触发条件:
   -1、浮动元素，float 除 none 以外的值；   
   -2、定位元素，position（absolute，fixed）；   
   -3、display 为以下其中之一的值 inline-block，table-cell，table-caption；   
   -4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
   
BFC的特性:
  -1.内部的Box会在垂直方向上一个接一个的放置。  
  -2.垂直方向上的距离由margin决定  
  -3.bfc的区域不会与float的元素区域重叠。  
  -4.计算bfc的高度时，浮动元素也参与计算  
  -5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。