CSS中的position定位属性

admin管理员组

文章数量:1606664

一、文档流

在分析position定位之前可以先简单了解下CSS中的脱离文档流是什么意思。
文档流：可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。

（更加详细的文档流讲解可到《关于CSS中的文档流》页面了解。）

口语化总结：脱离文档流，也就是将元素从普通的布局排版中拿走，不占据位置（悬空了），其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但盒子内其他的文本依然会为这个元素让出位置，环绕在周围。而对于使用position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

二、定位position

​

1.static  为position属性的默认值，在此则不予解释。

2.absolute  相对于已经定位父级元素的绝对定位。浮出、脱离布局流，它不占据空间，就是我们所说的层。若父级都没有定位，则以html（根元素）为参照物。

3.fixed  相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。不论窗口滚动与否，元素都会留在那个位置。

4.relative  是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）

5.sicky   可以看出是position:relaive和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

注：（1）在给元素加上定位position属性后，设置left、top、right、bottom的值才会有效果。

（2）绝对定位和相对定位的区别：

a.参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；

b.绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

（3）z-index : auto / number        检索或设置对象的层叠顺序。
        auto：默认值。
        number:无单位的整数值（可为负数）
        没有设置z-index时，最后写的对象优先显示在上层(前提是这些对象都拥有定位)，设置z-index后，数值越大，层越靠上；

三、定位position的使用案例

（1）让一个元素始终在浏览器窗口水平、垂直居中

        /* 方法一 */
        div {
            width: 200px;
            height: 200px;
            background: rgb(255, 110, 110);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        /* 方法二 */
        div {
            width: 200px;
            height: 200px;
            background: #f00;
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -100px;
        }

​

（2）吸顶效果。如网页中顶部导航栏吸顶效果

/* 顶部logo和导航区 */
.top {
    width: 100%;
    height: 78px;
    background: #58bc58;
    position: sticky;
    top: 0;
    /* 设置层级，防止被其他定位元素覆盖 */
    z-index: 300;
    /* 给导航栏加上阴影，显得更加真实 */
    box-shadow: 0 0 15px rgb(0 0 0 / 80%);
}

​

（3）三栏布局。可通过定位来实现页面简单的三栏布局

    <!-- 这是HTML的代码！ -->
    <div class="oa">
        <div class="top"></div>
        <div class="bottom">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

        * {
            /* 去除默认间距 */
            margin: 0;
            padding: 0;
        }
        html,body {
            /* 让视口的高度只取第一屏的高度，去除滚动条 */
            height: 100%;
        }

        .oa {
            height: 100%;
            /* 父相子绝 */
            position: relative;
        }

        .top{
            height: 80px;
            width: 100%;
            background-color: blanchedalmond;
        }

        .bottom{
            width: 100%;
            height: calc(100% - 80px);
            background-color: burlywood;
            position: absolute;
            left: 0;
            right: 0;
            /* 80px为减去顶栏的高度 */
            top: 80px;
            bottom: 0;
            height: 100%;
        }
        
        .bottom .left{
            width: 200px;
            height: 100%;
            background-color: cadetblue;
        }

        .bottom .right{
            height: 100%;
            background-color: rgb(85, 87, 196);
            position: absolute;
            /* 200px为减去左栏的宽度 */
            left: 200px;
            right: 0;
            bottom: 0;
            top: 0;
        }

​

重点：定位position，可实现很多意义重大的效果，该属性应该要尽快熟练，在这里就不一一列举案例！

关于定位position更详细的讲解可到W3C页面《CSS 布局 - position 属性》

本文标签： 属性cssPosition