CSS3 之 标签定位

说明

定位也是用于布局

定位原理：首先确定定位模式，然后确定偏移程度

偏移程度

偏移程度使用top、right、bottom、left属来定义。

定位模式

定位模式使用 position属性来定义。

静态定位（了解）

静态定位就是元素默认的定位方式。（几乎不会使用）

相对定位 （重要）

• 是相对于 该元素原本在标准流的位置。
• 但是原来的位置还是被占有。

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: tomato;
    }
    .a {
        position: relative;
        background-color: #00FFFF;
        top: 50px;
        left: 50px;
    }

</style>
<div></div>
<div class="a"></div>
<div></div>

绝对定位

绝对定位 不会保留原来的位置

子绝父相

• 绝对定位一般搭配有 定位的父容器使用（相对定位）。

position: relative;
top: 100px;
left: 100px;

• 绝对定位分两种情况：父容器 没有 定位、父容器 有 定位。

父容器没有定位

父容器没有定位，偏移参照就是浏览器窗口

<style type="text/css">
.box {
    width: 100px;
    height: 100px;
    background-color: tomato;
    margin: 100px;
}
.a {
    width: 100px;
    height: 100px;
    background-color: #00FFFF;
    position: absolute;
    top: 50px;
    left: 50px;
}

</style>
<div class="box">
<div class="a"></div>
</div>

父容器有定位

父容器没有定位，偏移参照就是有定位的父容器

这里 父容器是泛指：只要是上层容器都算，

<style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        background-color: tomato;
        position: relative;
        top: 100px;
        left: 100px;

    }
    .a {
        width: 100px;
        height: 100px;
        background-color: #00FFFF;
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>
<div class="box">
    <div class="a"></div>
</div>

固定定位

固定定位是：固定在 浏览器窗口的位置，不会随滚动条滚动。

<style type="text/css">
    .box {
        width: 100px;
        height: 1800px;
        background-color: tomato;
        top: 100px;
        left: 100px;

    }
    .a {
        width: 100px;
        height: 100px;
        background-color: #00FFFF;
        /* 固定定位 */
        position: fixed;
        top: 50px;
        left: 50px;
    }
</style>
<div class="box">
    <div class="a"></div>
</div>