1. position プロパティ
HTML の特定の要素を、CSS である要素の相対位置で指定したい。
詳解HTML&XHTML&CSS辞典
通常の状態で配置される位置からの相対位置で配置されるようにします。
基準となる要素の位置は position－スタイルシートリファレンス によると、
static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
2. 例
例えば、 id が hoge である div 要素をセンタリングする。その下に hoge 要素から右へ 50 px だけ移動した位置に、id が piyo である div 要素を位置付けたい。ただし、それぞれの要素の幅は固定で 500 px とする。
<html>
<head>
<title>相対的な位置</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
#hoge {
margin: auto;
width: 500px;
background-color: #fbb;
}
#piyo {
margin: auto;
width: 500px;
position: relative;
left: 50px;
background-color: #bfb;
}
-->
</style>
</head>
<body>
<div id="hoge">
hoge
</div>
<div id="piyo">
piyo
</div>
</body>
</html>
最初に、hoge 要素に対して、margin と width プロパティにより、位置・大きさを設定する。
- cf. CSS で要素をセンタリング
次に、piyo 要素に対して、同じく margin, width プロパティを指定する。
そして position プロパティにより、前の要素からの相対的な位置で指定をすることを示し、 left プロパティにより位置を右へずらす。
CSS で要素の相対的な位置指定 (2) につづく…
0コメント:
コメントを投稿