positionは画面内で要素の位置を決定する時に使うプロパティですが、その中でもペアのように使われるのがabsoluteとrelativeです。このふたつを使うことで、本来ありえない「要素が重なった状態」を作り出すことが可能です。
position:absoluteの概要
absolute＝絶対。普通ならHTMLタグは上から順にならべていったものが失敗したテトリスのように積みあがっていきますが、position:absoluteはそういう世間のしがらみは一切関係なく、基準となる位置から指定した距離に要素が出現します。
別記事で書いたposition:fixedというものもあり、これは画面の左上とかからどれぐらい離れているか、などを指定することができます。たとえば画面の左上に常時要素を置いておいたり、スクロールしてもずっとついてくるヘッダーを実装する場合はfixedになります。これに対してabsoluteは基準位置が親要素となり、スクロールすると親要素が流れる関係上、absoluteの要素もいっしょに流れます。
position:absolute
よくわからないかもしれませんが、あとで実例で説明するのでちょっとお待ちください。
position:relativeの概要
これに対してposition:relativeは、現在の位置からどれぐらい離れるかを指定することができる相対指定です。positionはデフォルトだとstatic（静的）という値になっていて、その名の通り配置した位置から動かせないんですが、これをズラしたりできるようにしたのがstaticです。
もともと
こんな感じの箱を作ったとして、staticならこれを書いたらもう動かせないですが、
relativeなら右にズラしたり
下に動かしたり
できるわけです。
position:relative
<！-- html -->
<div class = "box"></div>
/*CSS*/
.box{
position:relative;
border:1px solid black;
width:20px;
height:20px;
}
/*右に移動*/
.right-move{
left:20px;
}
/*下に移動*/
.down-move{
top:20px;
}右に動かすのにleftを指定しているのは、「左から○○px」という命令をしているからです。
position:relativeの使い方
position:relativeの場合は置いた位置を基準に移動することができました。fixedの場合は表示している画面の枠がそのまま基準位置になります。では、absoluteの基準をどのように決めるべきでしょうか。
と考えていくと、やはり「何かタグをつけて、その要素を基準にすればいい」または「自分が入っている親要素を基準にすればいい」という感じになります。しかしただ単純に親要素を基準にするというだけだと、後からデザインを追加した時とかにabsoluteの要素が吹っ飛んだりする可能性が想定されますので、CSSでは親要素でしかも特定のタグがついた要素を基準としています。
このposition:absoluteが親認定する「特定のタグ」がposition:relativeです。「なんで？」と思うんですがそういうルールです。従って、absoluteを書く場合は次のように書きます。
<position:relativeの要素>
<position:absoluteの要素></>
</>
もし親要素にrelativeが見あたらない場合、absoluteは祖父、その上と遡りながらrelativeを探して基準にしようとします。見つからない場合はfixed同様画面を基準にします。意図しない動きの原因となるので、原則relative配下にabsoluteは配置するようにしてください。
たとえばこういう関係ない2枚の画像を用意しておいて、
こんな感じで組み合わせることも容易、そう、absoluteならね。以上です。
<！-- html -->
<div class ="relative">
<img src="../baseball-player.jpg" alt="baseball-player" />
<span class = "absolute">
<img src="../sg.jpg" alt="sg" />
</span></div>
/*CSS*/
.relative{
position:relative;
}
.absolute{
position:absolute;
right:150px;
bottom:80px;
}
コメント