子绝父相

我就是我 2023-02-23 08:18 104阅读 0赞

绝对定位（absolute） : 元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
相对定位（relative） : 相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

1 绝对定位&相对定位

1.1 绝对定位（absolute）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70

<div class="abs">绝对定位</div>
<div></div>
<style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .abs {
        position: absolute;
        left: 30px;
        top: 30px;
        border: 1px solid green;
    }
</style>

1.2 相对定位（relative）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 1

<div class="abs">相对定位</div>
<div></div>
<style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .abs {
        position: relative;
        left: 30px;
        top: 30px;
        border: 1px solid green;
    }
</style>

1.3 子绝父相案例

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 2

<div class="box">
    <div class="new">新课</div>
</div>
<style>
    .box {
        width: 270px;
        height: 268px;
        position: relative;
        border-radius: 4px;
        background-image: url("https://img4.mukewang.com/szimg/5ecc7cb709a1053112000676-360-202.png");
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .box .new {
        position: absolute;
        border: 2px solid #FFFFFF;
        border-radius: 12px;
        top: 8px;
        left: -8px;
        font-family: 'dincondm', serif;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 20px;
        padding: 0 8px;
        background-color: #FFAA00;
        background-image: linear-gradient(90deg, #ffaa00 17%, #f76b1c 100%);
    }
</style>