[CSS] Anchor and css property overflow issue

CSS 這件事情雖然不是頂新的玩意，但是我還是第一次遇到錨點 (Anchor) 跟物件的定位、長度與 overflow 會干擾的情況。

這一切都要從 10 年前說起（欸

萬能的 overflow ？

其實我本來也以為它是萬能的，直到~~我膝蓋中了一箭~~。通常我們用 overflow 來做幾件事情，

清除 float
使用或是隱藏捲軸
隱藏超出元件的內容

正常來說，使用 overflow 是可以正確的將元素給框在你的父元件裡面，但是有一個問題，如果跟 position 搭配使用，會有一個 overflow: hidden 所帶來的麻煩！

捲軸中的捲軸

是，overflow: hidden 把內容切掉的主要原因，就是__不讓你捲動__，而實際上，捲軸是確切存在的，只是因為 hidden 的關係，所以被隱藏起來而已。

這個__隱藏起來__的捲軸會帶來什麼麻煩？就是當你使用 anchor 的時候，會很貼心的__幫你捲動那個看不到的捲軸__。

我們來一個簡單的範例，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            body {
                font-size: 16px;
            }
            .wrapper {
                overflow: hidden;
                position: relative;
            }
            .box {
                position: absolute;
                top: 10em;
                left: 10em;
                height: 30cm;
                width: 20em;
                background-color: #999999;
            }
            #here {
                width: 10em;
                height: 40em;
                background-color: red;
            }
            #there {
                width: 10em;
                height: 20em;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div id="here"></div>
            <div id="there"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

你用瀏覽器打開，然後直接下錨點 #there 然後看看有什麼結果？

為什麼？

我們換個方式，把 overflow 換到 body 身上，

    body {
        font-size: 16px;
        overflow: hidden;
        position: relative;
    }
    .wrapper {
    }

然後一樣下錨點 #there ，捲動的方式會跟剛剛很像。是的，這就像是 .wrapper 使用 overflow: hidden 的結果類似，只是因為 body 本身還是處於__捲軸可以捲動__的狀態，所以看不出所以然來。

所以，如果有超長元素，請用絕對定位把 bottom: 0 直接寫死，使用 height 只會自討苦吃。

結語

height: 30cm 是不好的範例，小朋友請不要學！