定位、垂直水平居中与锚点

定位

定位三要素：定位目标、参照物、坐标

position（static：默认值，不进行定位）

    1、absolute(绝对定位)

          定位目标：给需要定位的元素添加定位

          参照物：距离其最近的且带有定位的父元素，如果父元素一直未找到，会找到html

          坐标：可以通过top/bottom/left/right四个属性值对元素进行坐标的设置
                     top：目标元素的上边离参照物的上边的位置
                     bottom：目标元素的下边离参照物的下边的位置
                     left：目标元素的左边离参照物的左边的位置
                     right：目标元素的右边离参照物的右边的位置
                     可以加负数，如果元素没有定位，那么这四个值是不生效的
            特点：完全脱离文档流，不占据空间

    2、relative(相对定位)

          定位目标：给需要定位的元素添加定位

          参照物：元素本身

          坐标：可以通过top/bottom/left/right四个属性值对元素进行坐标的设置
                     top：目标元素的上边离参照物的上边的位置
                     bottom：目标元素的下边离参照物的下边的位置
                     left：目标元素的左边离参照物的左边的位置
                     right：目标元素的右边离参照物的右边的位置
            特点：完全脱离文档流，不占据空间

    3、fixed（固定定位）

          定位目标：给需要定位的元素添加定位

          参照物：浏览器

          坐标：可以通过top/bottom/left/right四个属性值对元素进行坐标的设置
                     top：目标元素的上边离参照物的上边的位置
                     bottom：目标元素的下边离参照物的下边的位置
                     left：目标元素的左边离参照物的左边的位置
                     right：目标元素的右边离参照物的右边的位置
                     可以加负数，如果元素没有定位，那么这四个值是不生效的
            特点：完全脱离文档流，不占据空间

    4、sticky：粘性定位
             当元素没有移出窗口范围的时候，相当于相对定位；当元素移出窗口范围的时候，相当于固定定位

垂直水平居中

    1、使用margin

          缺点：需要计算，必须知道父元素与子元素的宽高

    2、使用定位加margin

          缺点：还是需要知道子元素的宽高

    3、直接使用定位         

top：0；
bottom：0；
left：0；
right：0；
margin：auto；

          注意：子元素必须有宽高

锚点

    作用：在同一页面内的不同位置进行跳转

    语法：

          1、给元素定义命名锚记名
               语法：<标记 id="命名锚记名"> </标记>
        2、命名锚记连接
               语法：<a href="#命名锚记名称">链接文本或图片</a>