/ overflow

[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 是不好的範例,小朋友請不要學!