子絕父相

• 絕對定位（absolute） : 元素會脫離文檔流，如果設置偏移量，會影響其他元素的位置定位
• 相對定位（relative）   : 相對於原來位置移動，元素設置此屬性之後仍然處在文檔流中，不影響其他元素的佈局

---

1 demo

1.1 absolute

<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

<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 absolute + relative

<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>

https://www.w3school.com.cn/cssref/pr_background-size.asp 

---

2 案例分析 

https://www.imooc.com/

 

https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html