HTML/CSS、position:relativeの話

Posted by dab | 2012年5月9日 水曜日 20:36:41 < コンピュータ >

relativeの基準点はstatic(何も指定しないとき)の表示位置です。

使用例

<style>
i.note {
position: relative;
top: 10px;

font-size: small;
font-style: normal;
}
i.note:before {
content: "(";
display: inline;
}
i.note:after {
content: ")";
display: inline;
}
i.note b {
font-weight: medium;
}
i.note b:after {
content: ": ";
display: inline;
}
</style>

<p>ろーれんいぷさむ翻訳<i class="note"><b>訳者注</b>なんですと</i></p>

ろーれんいぷさむ翻訳訳者注なんですと

なお、<sup><sub>はフランス語のスーパースクリプト、サブスクリプト、数学、物理学など、
「上付、下付をやめると意味が変わるもの」に使うためのもので、
デザインとして上付き文字、下付き文字にする場合は、スタイルシートを使うことになります。
その方法がrelativeです。


これを応用すると、波形のデザインもできます。

<style>
p span{ position: relative;}
p span:nth-child(1) {top: 20px;}
p span:nth-child(2) {top: 10px;}
p span:nth-child(3) {top: 0px;}
p span:nth-child(4) {top: -10px;}
p span:nth-child(5) {top: -20px;}
p span:nth-child(6) {top: -20px;}
p span:nth-child(7) {top: -10px;}
p span:nth-child(8) {top: 0px;}
p span:nth-child(9) {top: 10px;}
p span:nth-child(10) {top: 20px;}
</style>

<p><span>あ</span><span>い</span><span>う</span><span>え</span><span>お</span><span>か</span><span>き</span><span>く</span><span>け</span><span>こ</span></p>


ブロック要素、<div>などに対して使う時のrelativeは、
広告バナーアニメーションや、ゲーム画面のコンテナ(プレイエリア)に使う時などが多いと思います。

position:absoluteは要素がドキュメントから切り離されます(ニュアンスとして)が、relativeでは切り離されません。

<div style="position: absolute;border:1px solid blue;">absoluteヘッダー</div>
<div>あいうえおかきくけこーーーabsoluteヘッダーに重なる</div>

absoluteヘッダー
あいうえおかきくけこーーーabsoluteヘッダーに重なる

<div style="position: relative;border:1px solid blue;">relativeヘッダー</div>
<div>あいうえおかきくけこーーーrelativeヘッダーに重ならない</div>

relativeヘッダー
あいうえおかきくけこーーーrelativeヘッダーに重ならない

absoluteの基準点はbodyですが、
absolute/relativeの中にabsoluteを入れると、基準点は親要素になります。

<div style="position: relative;border:1px solid blue;height:60px;">
↑この要素の左上からtop:20px;left:30px;
<div style="position:absolute;border:1px solid red;top:20px;left:30px;">あいうえおかきくけこ</div>
</div>

↑この要素の左上からtop:20px;left:30px;

あいうえおかきくけこ

内側がabsoluteになっていると、外側のheightが0になってしまいます(absoluteヘッダーの例参照)ので、heightを指定してあります。
widthが指定してありませんが、divのwidthの初期値はauto、つまり100%とほぼ同じになります。

話題元ネタ:OKWave

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=917

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: