tyoshikawa1106のブログ

- Force.com Developer Blog -

CSSのpositionの使い方メモ

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

f:id:tyoshikawa1106:20160404165734p:plain


こんな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の位置に移動する
f:id:tyoshikawa1106:20160404170213p:plain


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

参考

まだ途中ですが、すごくわかりやすいです。