Skip to content
2012/07/09 / Javelina

position:fixedで、左端を親要素基準にする

メモです。
CSSでposition:fixedを指定した要素の左端を、ブラウザ基準ではなく親要素基準にする方法を知りました。
もしかしたら常識的な事なのかもしれないのですが、つい最近はじめて知ってビックリ。まさに目からウロコでしたw

やり方は簡単で、親要素にwidthを指定してmargin:0 autoなどで中央寄せにし、子要素はposition:fixedした上でleftを指定しない(left:autoと同じ)。これだけです。親要素からの距離は、margin-leftで指定すればよいわけです。これで、ブラウザサイズに影響されないで、ある要素の隣にぴったりと追従する(ように見える)サイドバーとかボタンが作れるわけですね。こんな単純な事に今までに気づけずにいたとは。
 

HTML↓

<body>
	<div id="parent">
		<p id="child">Fixed</p>
	</div>
</body>

CSS↓

/*親要素*/
#parent{
width:900px;
height:750px;
margin:0 auto;
padding:0;
}

/*子要素*/
#child{
width:50px;
height:100px;
position:fixed;
left:auto;
top:0;
margin:0 0 0 900px;
padding:0;
}

 
サンプル ⇒ http://devilish.xsrv.jp/test/fixed-test.php
 
position:fixedは強制的にブラウザ基準で位置が決まるものだとばかり思っていましたが、このように位置指定できるとなるとなかなか便利に使えそうです。ただし注意点があって、親要素の中にfloat:leftしている他の要素があったりすると、ブラウザによって基準位置が変わってしまうようです。
 

広告

6件のコメント

コメントする
  1. kaz / 2月 19 2014 4:12 pm

    ありがとうございました!すっきり!
    トップへ戻るボタンで活用させて頂きます!

  2. Javelina / 2月 20 2014 10:42 pm

    kazさん

    お役に立てそうでなによりです!

Trackbacks

  1. ウェブデザインの参考になるWeb and draw
  2. 11月26日 | 19750331.com
  3. 【1週間分おまとめ】WEBデザインの人気記事#5~和風・自然のテクスチャ、ロゴの本~
  4. 【jQuery】ページトップへ戻るリンクをフッターまでスクロールしたら固定する | Creator Clip

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。