〈エルフの長靴〉亭

D.E.の雑記ブログ

fixedなヘッダで節が隠れてしまう問題の解決

グローバルヘッダと言うのかどうかはっきりしないが、ページ上部の「Hatena Blog」と書かれている帯の部分。[:contents]で目次を生成し目次のリンクをクリックして節に飛んだ場合、このヘッダが節の文字を隠してしまう(PC版表示の場合)。ヘッダがスクロールに追従するのは、#globalheader-container {position: fixed}になっているからだと思われる。そのため、#globalheader-container {position: relative}にして追従を無効化すればよい。

(当初はpositipn: stickyなるものを使おうと思ったものの、どうもうまくいかなかったので暫定的にposition: relativeを使った。私がCSSを学んだのは大昔なので、近年追加されたものはよくわからない)

CSSを弄っていると、昔まだウィキペディア日本語版で活動していた頃に、absoluteを用いてページ右上に文字列を表示する後から独自に追加された機能が、度々ウィキペディア本体の更新の影響で文字被りを起こしていたのを思い出す。基本的に絶対位置配置は問題が起きることが多い。