CSS3 之 标签定位扩展

绝对定位水平居中

• left: 50%;：先使左端偏移中间。
• margin-left: -50px; 在往左移动 自身宽度的一半。

实例

<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: tomato;
        /* 相对定位 */
        position: relative;
        top: 0px;
        left: 0px;

    }
    .a {
        width: 100px;
        height: 100px;
        background-color: #00FFFF;
        /* 绝对定位 */
        position: absolute;
        left: 50%;
        margin-left: -50px;
    }
</style>
<div class="box">
    <div class="a"></div>
</div>

层叠顺序 z-index

• z-index 值大的，在上面。
• z-index 只用于定位。

默认顺序

改变属性