CSSのpositionの使い方メモ

いまいち理解できていないCSSのpositionの使い方メモ。

こんなFooterコード

<footer id="footer">
  <div id="footer_inner">
    <p id="pagetop">
      <a href="#">PAGETOP</a>
    </p>
    <p id="footer_logo">
      <略>
    </p>
    <ul>
      <略>
    </ul>
  </div>
</footer>

footer_innerに対して『position: relative;』を宣言。ここを基準にするという意味。

div#footer_inner {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

今回、移動の対象になるのが次のaタグリンク。

<p id="pagetop">
  <a href="#">PAGETOP</a>
</p>

次のように『position: absolute;』を宣言。他の要素との関係は切り離され別物になる。topやrightを宣言することで位置を調整。

p#pagetop a {
  <略>
  position: absolute;
  top: 0;
  right: 0;
}

これでtop: 0, right: 0の位置に移動する

あとはtop: -20pxというようにマイナス指定するとフッター部分から飛び出る感じで表示される。