html - オーバーフロー:hidden は div を内部に移動します

Question

説明できないことに遭遇しました。ここでも Google でも答えが見つかりませんでした。

私は次のコードを持っています：（頭と他の構造はここで切り捨てられています...）

<link rel="stylesheet" type="text/css" href="style.css">

<div id="wrapper">
    <div id="ajaxdiv">
        <div id="page0">
            <p>000000000 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        </div>
    </div>
</div>

そしてこのCSS：

#container {
    width: 800px;
    margin: 0 auto;
}
#wrapper {
    overflow: hidden;
}

#ajaxdiv {
    background-color: #e3e3e3;
    height: 500px;
    width: 800px;
    position: relative;
}

問題は、「overflow: hidden;」という行があることです。私のラッパーでは、内部の div、つまり ajaxdiv が置き換えられています。約 10 ～ 20 ピクセル下に移動していますが、なぜこれが起こっているのかわかりません。

誰か説明がありますか？