定位布局

定位类型

选项	说明
static	默认形为，参考文档流
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

位置偏移

可以为部分类型的定位元素设置上、下、左、右 的位置偏移。

选项	说明
top	距离顶边
bottom	距离下边
left	距离左部
right	距离右边

相对定位

相对定位是相对于元素原来的位置控制，当元素发生位置偏移时，原位置留白。

绝对定位

绝对定义不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性。

参照元素

如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参数此父元素进行定位。且相对于边框内侧为起始0，0，忽略padding， margin。

居中定位

通过将 left 设置为 50% ,并向左偏移子元素宽度一半可以实现水平居中，垂直居中使用方式类似。

<style>
    article.love-position-center {
        width: 200px;
        height: 200px;
        border: solid 6px blueviolet;
        position: relative;

        div {
            width: 100px;
            height: 100px;
            background: #f2a67d;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    }
</style>

<article class="love-position-center">
    <div></div>
</article>

滚动行为

固定定位元素会随滚动条发生滚动。

<style>
    main.love-position-scroll {
        width: 300px;
        height: 300px;
        border: solid 10px blueviolet;
        position: relative;
        overflow: scroll;

        article {
            height: 600px;

            div {
                width: 200px;
                height: 200px;
                position: absolute;
                background: red;
                left: 0px;
                bottom: 0px;
            }

        }

    }
</style>

<main class="love-position-scroll">
    <article>
        <div></div>
    </article>
</main>

纵向重叠

如果元素重叠在一起，可以使用 z-index 控制元素的上下层级，数值越大越在上面。

父级子元素设置 z-index 没有意义，子元素永远在父元素上面的。

固定定位

元素相对于页面固定定位在某个位置，固定定位元素不会在滚动时改变位置 ，使用position: fixed 产生固定定位。

粘性定位

同级定位

属于同一个父元素设置粘性定位时，后面的元素会与前边的元素重叠。

<style>
    main.love-position-sticky-demo-no {
        padding: 30px;
        font-size: 14px;

        article {


            width: 400px;
            border: solid 5px blueviolet;
            height: 200px;
            overflow: scroll;

            h2:nth-of-type(odd) {
                background: blueviolet;
            }

            h2 {
                background: #db1f77;
                color: white;
                text-indent: 20px;
                position: sticky;
                top: 0;
                margin: 0;
                padding: 0;
            }

            p {
                padding: 20px;
            }
        }
    }
</style>

<main class="love-position-sticky-demo-no">
    <article>
        <h2>中国人民志愿军</h2>
        <p>
            中国人民志愿军是中国人民解放军的军队，成立于1950年10月1日，是中华人民共和国的军队。志愿军在朝鲜半岛上与联合国军作战，最终于1953年7月27日签订《朝鲜停战协定》后撤回中国。志愿军在朝鲜半岛上的战斗中，表现出了英勇无畏的战斗精神，赢得了国际社会的广泛赞誉。
        </p>
        <h2>朝鲜停战协定</h2>
        <p>
            中国人民志愿军的第一任司令员兼政治委员是彭德怀，邓华为副司令员兼副政治委员，洪学智、韩先楚、宋时轮、陈赓为副司令员，解方任参谋长。至1953年7月27日，战争双方在《朝鲜停战协定》上签字，抗美援朝战争结束，中国人民志愿军即分批从朝鲜撤离。1959年1月，志愿军司令部、政治部、后勤部建制均被撤销。
        </p>
        <h2>美军飞机</h2>
        <p>
            美军飞机入侵中国领空并轰炸中国东北边境城镇。时任中央人民政府政务院总理兼外交部长周恩来宣布：“中国人民绝不能容忍外国的侵略，也不能听任帝国主义者对自己的邻人肆行侵略而置之不理。”美国对中国政府的警告仍然置若罔闻，“联合国军”越过三八线，占领朝鲜民主主义人民共和国首都平壤，并向鸭绿江进犯，严重威胁中国的安全。1950年10月8日，中国政府应朝鲜民主主义人民共和国政府的请求决定出兵朝鲜，并将东北边防军改名为中国人民志愿军。
        </p>
    </article>
</main>

中国人民志愿军

中国人民志愿军是中国人民解放军的军队，成立于1950年10月1日，是中华人民共和国的军队。志愿军在朝鲜半岛上与联合国军作战，最终于1953年7月27日签订《朝鲜停战协定》后撤回中国。志愿军在朝鲜半岛上的战斗中，表现出了英勇无畏的战斗精神，赢得了国际社会的广泛赞誉。

朝鲜停战协定

中国人民志愿军的第一任司令员兼政治委员是彭德怀，邓华为副司令员兼副政治委员，洪学智、韩先楚、宋时轮、陈赓为副司令员，解方任参谋长。至1953年7月27日，战争双方在《朝鲜停战协定》上签字，抗美援朝战争结束，中国人民志愿军即分批从朝鲜撤离。1959年1月，志愿军司令部、政治部、后勤部建制均被撤销。

美军飞机

美军飞机入侵中国领空并轰炸中国东北边境城镇。时任中央人民政府政务院总理兼外交部长周恩来宣布：“中国人民绝不能容忍外国的侵略，也不能听任帝国主义者对自己的邻人肆行侵略而置之不理。”美国对中国政府的警告仍然置若罔闻，“联合国军”越过三八线，占领朝鲜民主主义人民共和国首都平壤，并向鸭绿江进犯，严重威胁中国的安全。1950年10月8日，中国政府应朝鲜民主主义人民共和国政府的请求决定出兵朝鲜，并将东北边防军改名为中国人民志愿军。

非同级定位

不属于同一个父元素设置粘性定位时，后面的元素挤掉原来位置的元素如下例。

<style>
    main.love-position-sticky-demo {
        padding: 30px;
        font-size: 14px;

        article {
            width: 400px;
            border: solid 5px blueviolet;
            height: 200px;
            overflow: scroll;

            section:nth-of-type(odd) h2 {
                background: blueviolet;
            }

            section h2 {
                    background: #db1f77;
                    color: white;
                    text-indent: 20px;
                    position: sticky;
                    top: 0;
                    margin: 0;
                    padding: 0;
                }

            section p {
                padding: 20px;
            }
        }
    }
</style>

<main class="love-position-sticky-demo">
    <article>
        <section>
            <h2>中国人民志愿军</h2>
            <p>
                中国人民志愿军是中国人民解放军的军队，成立于1950年10月1日，是中华人民共和国的军队。志愿军在朝鲜半岛上与联合国军作战，最终于1953年7月27日签订《朝鲜停战协定》后撤回中国。志愿军在朝鲜半岛上的战斗中，表现出了英勇无畏的战斗精神，赢得了国际社会的广泛赞誉。
            </p>
        </section>
        <section>
            <h2>朝鲜停战协定</h2>
            <p>
                中国人民志愿军的第一任司令员兼政治委员是彭德怀，邓华为副司令员兼副政治委员，洪学智、韩先楚、宋时轮、陈赓为副司令员，解方任参谋长。至1953年7月27日，战争双方在《朝鲜停战协定》上签字，抗美援朝战争结束，中国人民志愿军即分批从朝鲜撤离。1959年1月，志愿军司令部、政治部、后勤部建制均被撤销。
            </p>
        </section>
        <section>
            <h2>美军飞机</h2>
            <p>
                美军飞机入侵中国领空并轰炸中国东北边境城镇。时任中央人民政府政务院总理兼外交部长周恩来宣布：“中国人民绝不能容忍外国的侵略，也不能听任帝国主义者对自己的邻人肆行侵略而置之不理。”美国对中国政府的警告仍然置若罔闻，“联合国军”越过三八线，占领朝鲜民主主义人民共和国首都平壤，并向鸭绿江进犯，严重威胁中国的安全。1950年10月8日，中国政府应朝鲜民主主义人民共和国政府的请求决定出兵朝鲜，并将东北边防军改名为中国人民志愿军。
            </p>
        </section>
    </article>
</main>

中国人民志愿军

中国人民志愿军是中国人民解放军的军队，成立于1950年10月1日，是中华人民共和国的军队。志愿军在朝鲜半岛上与联合国军作战，最终于1953年7月27日签订《朝鲜停战协定》后撤回中国。志愿军在朝鲜半岛上的战斗中，表现出了英勇无畏的战斗精神，赢得了国际社会的广泛赞誉。

朝鲜停战协定

中国人民志愿军的第一任司令员兼政治委员是彭德怀，邓华为副司令员兼副政治委员，洪学智、韩先楚、宋时轮、陈赓为副司令员，解方任参谋长。至1953年7月27日，战争双方在《朝鲜停战协定》上签字，抗美援朝战争结束，中国人民志愿军即分批从朝鲜撤离。1959年1月，志愿军司令部、政治部、后勤部建制均被撤销。

美军飞机

美军飞机入侵中国领空并轰炸中国东北边境城镇。时任中央人民政府政务院总理兼外交部长周恩来宣布：“中国人民绝不能容忍外国的侵略，也不能听任帝国主义者对自己的邻人肆行侵略而置之不理。”美国对中国政府的警告仍然置若罔闻，“联合国军”越过三八线，占领朝鲜民主主义人民共和国首都平壤，并向鸭绿江进犯，严重威胁中国的安全。1950年10月8日，中国政府应朝鲜民主主义人民共和国政府的请求决定出兵朝鲜，并将东北边防军改名为中国人民志愿军。