overflow，這個屬性負責如何處理溢出的內容
這是一般的情況，內容直接超出其包裹的容器繼續顯示，這是因為物件的預設值overflow:visible

overflow:hidden隱藏溢出內容

    <div style="overflow: hidden;">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, laborum facere? Rem iusto voluptatibus tempora, id magni laudantium aliquid molestias ipsum ipsam quo dicta. Quod eveniet consectetur nihil dignissimos adipisci?
    </div>

原先超出容器的部分會被隱藏看不見

不僅限文字，圖片也能使用

overflow:scroll給容器滾動條，但就算沒有溢出也會顯示滾動條的樣式，文字因為寬度會被限制在容器內所以沒有橫向的滾動條



overflow:auto給容器滾動條，但跟scroll不一樣的是，如果內容沒有溢出容器的話，就不會顯示滾動條的樣式

    <div style="overflow:auto;">
        <p>Lorem ipsum dolor sit amet</p>
    </div>

overflow也可以分別設定
overflow-y給容器的y軸設定overflow屬性
overflow-x給容器的x軸設定overflow屬性

    <div style="overflow-y: hidden;overflow-x: scroll;">

縱向超出的部分，因為overflow-y:hidden被隱藏，overflow-x:scroll給了容器橫向滾動條

overflow和position的關係

hidden對fixed無用

   <div style="overflow:hidden">
        
            <p style="position: fixed;top: 2%;"></p>
       
    </div>

    <div style="overflow:auto">

            <p style="position:relative;top:50px ;left: 100px;"></p>

    </div>

相對定位可以照常移動

    <div style="overflow:auto">

            <p style="position:absolute;top:0px ;left: 100px;"></p>

    </div>

overflow對以body為基準的絕對定位沒有影響

   <div style="overflow:auto;position: relative;">

            <p style="position:absolute;top:0px ;left: 100px;"></p>

    </div>

但是以相對定位為基準的話，則overflow可以生效