定位布局

基础知识

定位类型

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

位置偏移

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

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

使用百分比单位时使用的是父级尺寸

相对定位

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

绝对定位

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

参照元素

如果父级元素设置[relative | fixed | sticky]，绝对定位子元素将参数此父元素进行定位。

默认位置

如果没有为定位元素设置偏移，将受父元素的padding等属性影响。但使用定位一般都会设置偏移位置。

设置尺寸

可以通过定位的偏移值设置元素的尺寸。

居中定位

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

滚动行为

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

纵向重叠

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

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

固定定位

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

粘性定位

同级定位

* {
    padding: 0;
    margin: 0;
}
main {
    padding: 30px;
    font-size: 14px;
}
main article {
    width: 400px;
    height: 100px;
    border: solid 5px blueviolet;
    overflow: scroll;
}
main article h2 {
    background: #db1f77;
    color: white;
    text-indent: 20px;
    position: sticky;
    top: 0;
}
main article h2:nth-of-type(1) {
    background: blueviolet;
}
main article section {
    height: 300px;
}

<main>
    <article>
        <section></section>
        <h2>mkimq</h2>
        <section></section>
        <h2>MKIMQ</h2>
        <section></section>
    </article>
</main>

非同级定位

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

* {
    padding: 0;
    margin: 0;
}
main {
    padding: 30px;
    font-size: 14px;
}
main article {
    width: 400px;
    border: solid 5px blueviolet;
    height: 200px;
    overflow: scroll;
}
main article section:nth-of-type(odd) h2 {
    background: blueviolet;
}
main article section h2 {
    background: #db1f77;
    color: white;
    text-indent: 20px;
    position: sticky;
    top: 0;
}
main article section p {
    padding: 20px;
}

<main>
    <article>
        <section>
            <h2>mkimq.com</h2>
            <p>
                文本信息
            </p>
        </section>
        <section>
            <h2>在线文档</h2>
            <p>
                文本信息
            </p>
        </section>
        <section>
            <h2>www.mk.com</h2>
            <p>
                文本信息
            </p>
        </section>
    </article>
</main>