CSS定位

CSS定位position可能的几种值：

元素都有position属性，其默认值是"static"，此时盒子是静止的,不接受left,top等的控制

盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值

注意：固定定位fixed只相对于浏览器窗口进行定位，即使它的父元素加有relative,或者absolute

1,position:relative 与position:absolute

position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。

现在大家做的网页大部分是居中的，那么我需要这个元素跟着网页中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的，那么单纯的absolute是不行的。

正确的解决方法就是在元素的父级元素定义为position:relative;（更正：这里可以是祖父级，也可以是position:absolute;）需要绝对定位的元素设为position:absolute;

这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧！

3,那我们今天就讲讲position属性的relative和absolute值
首先说relative ,相对定位。
怎么理解呢？如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意，在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。
我们先看看下图：

上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。
接下来我给那个设置了position:relative的块设置一个偏移：left:50px ; top:30px 这时我们再看看效果：

这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。
同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。
我们可以设置它的z-index属性来调整它的堆叠顺序。

例子：子元素在父元素内垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        /***父盒子和盒子本生宽高都固定，此时想要盒子在父盒子中居中
        top:父盒子高度一半-盒子本身高度一半
        left:50%,
        margin-left:-盒子宽度的一半
        ***/
        *{
            margin:0;
            padding:0;
        }
        .box {
            background: #8ec63f;
            height: 170px;
            width: 200px;
            position: absolute;
            left:50%;
            margin-left: -100px;
            top:15px;
        }
        .box-set{
            background-color: bisque;
            overflow:hidden;
            position:absolute;
            height: 200px;
            width: 300px;

        }

    </style>
</head>
<body>
<div class="box-set">
    <div class="box">Box 1</div>
</div>
</body>
</html>