Position

指定一个元素的定位的类型

relative 相对定位

以正常的文档流位置进行定位, 元素的位置通过 4 个方向的属性进行调整

absolute 绝对定位

元素以父元素的位置进行定位,父元素的 Position 属性不得是 static, 一直向上查找,
直到 body 为止。

fixed 绝对定位(固定定位)

生成绝对定位的元素,其相对于浏览器窗口进行定位。元素的位置通过 4 个方向的属性进行调整

填充元素容器

<style type="text/css">
    .wrap{
        border:2px solid #000;
        width: 95%;
        height:450px;
        position:relative;
        margin:50px auto;
    }
    .wrap .content{
        background-color:#999;
        position:absolute;
        /* 通过设置 4 个定位点, 是容器填充整个父级 */
        left:0;
        top:0;
        right:0;
        bottom:0;
    }
</style>
<div class="wrap">
    <div class="content"></div>
</div>

可以看到 .wrap 先定义了一个容器, 并设置了相对定位属性, .content 设置了绝对定位属性,
这里分别设置了 4 个方向的属性都为 0, 并设置了一个背景色, 从效果中可以看出, 背景色填充
了整个 .wrap 容器。
ps: 与一般的写法不一样, 常会像下面这样写:
.wrap .content{
    background-color:#999;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

让一个元素居中显示

<style type="text/css">
    .wrap{
        border:2px solid #000;
        width: 200px;
        height:200px;
        position:relative;
        margin:50px auto;
    }
    .wrap .content{
        background-color:#999;
        position:absolute;
        left:50%;
        top:50%;
        width:100px;
        height:100px;
        margin-left:-50px;
        margin-top:-50px;
    }
</style>
<div class="wrap">
    <div class="content"></div>
</div>


通过绝对定位, 设置 left / top 分别为父元素的 50% , 在设置 margin-left / top
负移动自身容器大小的一半。
这种方式有一个缺陷是假如容器本大小不能确定的时候,需要使用 js 去计算, 才能准确定位
假如只考虑支持 css3 的浏览器可以使用 transform: translate 来做定位。

transform: translate

<style type="text/css">
    .wrap{
        border:2px solid #000;
        width: 200px;
        height:200px;
        position:relative;
        margin:50px auto;
    }
    .wrap .content{
        background-color:#999;
        position:absolute;
        left:50%;
        top:50%;
        width:100px;
        height:100px;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }
</style>
<div class="wrap">
    <div class="content"></div>
</div>

translate(x,y) 根据元素当前位置做移动, 移动参考对象是元素本身,
上面效果设置 -50% 就是移动元素本身容器大小的一半。