CSS3 之 标签定位

说明

定位也是用于布局

定位原理:首先确定定位模式,然后确定偏移程度

偏移程度

偏移程度使用toprightbottomleft属来定义。

偏移程度属性 实例 描述
top top: 10%; 定义元素相对于父元素上边线的距离
right right: 13px; 定义元素相对于父元素右边线的距离
bottom bottom: 13px; 定义元素相对于父元素下边线的距离
left left: 13px; 定义元素相对于父元素左边线的距离

定位模式

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

含义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

静态定位(了解)

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

相对定位 (重要)

  • 是相对于 该元素原本在标准流的位置
  • 但是原来的位置还是被占有
<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>

mark

绝对定位

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

子绝父相

  • 绝对定位一般搭配有 定位的父容器使用(相对定位)。
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>

mark

父容器有定位

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

这里 父容器是泛指:只要是上层容器都算,

<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>

mark

固定定位

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

<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>

mark

发表评论 / Comment

用心评论~