Loading

CSS的定位布局(position)

定位

static(默认值) 没有开启定位

position: static;

relative 相对定位的性质

  • 元素开启相对定位后,如果不设置偏移量元素位置将不会发生任何变化
  • 参照坐标原点就是元素初始位置
    position: static;
    top: 0;
    left: 0;
    
  • 相对定位不会脱离文档流,性质不发生改变
  • 相对定位会提升元素的层级

包含块(containing block)概念

没有开启定位时包含块就是当前元素最近的祖先块元素

<style>
    .box4{
        display: inline
    }
</style>
<div class="box1">
    <div class="box2">
        <div class="box4">
            <div class="box3"></div>    <!-- box3的包含块是box2,因为box4此时是行内元素 -->
        </div>
    </div>
</div>

开启绝对定位后的元素包含块有两种情况

如果所有祖先元素都没有开启定位,则依据根元素()进行定位

<style>
    .box1{
        width: 400px;
        height: 400px;
        background-color: brown;
    }
    .box2{
        width: 300px;
        height: 300px;
        background-color: #bfa;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<body>
    <div class="box1">
        1
        <div class="box2">
            2
            <div class="box3">3</div>
        </div>
    </div>
</body>

如果祖先元素有开启定位,则依据最近的开启定位的祖先元素进行定位

<style>
    .box1{
        width: 400px;
        height: 400px;
        background-color: brown;
        position: relative;
    }
    .box2{
        width: 300px;
        height: 300px;
        background-color: #bfa;
        position: relative;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<body>
    <div class="box1">
        1
        <div class="box2">  <!-- 依据最近的开启定位的祖先元素进行定位 -->
            2
            <div class="box3">3</div>
        </div>
    </div>
</body>

absolute 绝对定位的性质

position: absolute;
  • 不设置偏移量元素位置将不会发生任何变化

  • 元素从文档流中脱离,元素性质发生改变

  • 相对定位会提升元素的层级

  • 绝对定位元素的参照坐标系是依据包含块的变化而变化的

fixed 固定定位的性质

性质与absolute定位大部分一致,唯一不同的是参照坐标系的依据

<style>
    *{
        font-size: 50px;
    }

    html{
        height: 2500px; /* 同时固定定位不会随着滚动条滚动 */
    }
    
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: orange;
        
        /* 固定定位 */
        position: fixed;
        /* 唯一与absolute定位不同的是:fixed定位的坐标系原点永远是浏览器的视口(最左上角) */
        left: 0;
        top: 0;
        margin-top: 100px;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
    .box4{
        width: 400px;
        height: 400px;
        background-color: tomato;
    }
    .box5{
        width: 300px;
        height: 300px;
        background-color: aliceblue;
    }
</style>
<body>
    <div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>
</body>

sticky 粘滞定位的性质

粘滞定位与相对定位的性质一致,但是粘滞定位可以使元素到达某个位置时将其固定

注意: 粘滞定位是参照坐标是依据其最近的拥有滚动机制的元素(包括overflow非visible的所有值)或包含块元素

<style>
    body{
        height: 2500px;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        position: sticky;
        top: 450px;
    }

    .box2{
        width: 200px;
        height: 200px;
        background-color: royalblue;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

posted @ 2021-02-10 23:46  虚伪渲染敷衍  阅读(218)  评论(0编辑  收藏  举报