position:absoluteを使うとき…

どうして？っていわれるかもしれないですけど、なんか、position:absoluteを使って解決するのって、ずるいような、負けを認めたような、そんな感じがしてました。
たぶん、absoluteを使わなきゃ解決できないコードを書いたことがないからだと思います。

positionの値として、static（初期値、配置を指定できない）、reletive(相対位置で記述)、absolute(親ボックスを基準に絶対位置で記述)、 fixed(スクロールせず、固定)があります。そのうち、自分で書く可能性が高いのはrelativeとabsoluteです。で、absoluteを使うときは、親ボックスが基準として使われ、その親ボックスにはstatic以外（とりあえずreletiveにしておけばOK）を指定しておかなければならないです。

これが今回使うXHTMLソースです。小さい写真を囲むpにphotoというIDを付け、absoluteで位置指定します。この写真がどこへ移動するか見てみます。

XHTML

<div id="wrap">

<div id="outer">

<div id="inner">

<p><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></p>

<p id="photo"><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></p>

</div>

</div>

</div>

まず、どこにもposition:relativeをつけません。

CSS

*{
	margin:0;
	padding:0;
}
#wrap {
	padding:80px;
}
#outer {
	background-color:#FCC;
	height:700px;
	width:800px;
	margin:0 auto;
	border:1px #000 solid;
}
#inner {
	margin:100px;
	background-color:#FFF;
	padding:50px;

}
#photo {
	position:absolute;
	left:10px;
	top:10px;
}

▼サンプルはこちら

写真の位置は、ウィンドウの左上から10pxのところです。どこにもrelativeの指定がないので、ウィンドウが基準になっています。

CSS

*{
	margin:0;
	padding:0;
}
#wrap {
	padding:80px;
	position:relative;
}
#outer {
	background-color:#FCC;
	height:700px;
	width:800px;
	margin:0 auto;
	border:1px #000 solid;
}
#inner {
	margin:100px;
	background-color:#FFF;
	padding:50px;
}
#photo {
	position:absolute;
	left:10px;
	top:10px;
}

▼サンプルはこちら

写真の位置は、ウィンドウの左上から10pxのところです。一番外側の#wrapにrelativeの指定があるので、1つめと同様にウィンドウが基準になっています。

CSS

*{
	margin:0;
	padding:0;
}
#wrap {
	padding:80px;
}
#outer {
	background-color:#FCC;
	position:relative;
	height:700px;
	width:800px;
	margin:0 auto;
	border:1px #000 solid;
}
#inner {
	margin:100px;
	background-color:#FFF;
	padding:50px;
}
#photo {
	position:absolute;
	left:10px;
	top:10px;
}

▼サンプルはこちら

写真の位置は、#outerの左上から10pxのところです。#outerにrelativeの指定があるので、#outerが基準になっています。

CSS

*{
	margin:0;
	padding:0;
}
#wrap {
	padding:80px;
}
#outer {
	background-color:#FCC;
	height:700px;
	width:800px;
	margin:0 auto;
	border:1px #000 solid;
}
#inner {
	margin:100px;
	background-color:#FFF;
	padding:50px;
	position:relative;
}
#photo {
	position:absolute;
	left:10px;
	top:10px;
}

▼サンプルはこちら

写真の位置は、#innerの左上から10pxのところです。#innerにrelativeの指定があるので、#innerが基準になっています。

CSS

*{
	margin:0;
	padding:0;
}
#wrap {
	padding:80px;
}
#outer {
	background-color:#FCC;
	height:700px;
	width:800px;
	margin:0 auto;
	border:1px #000 solid;
	position:relative;
}
#inner {
	margin:100px;
	background-color:#FFF;
	padding:50px;
	position:relative;
}
#photo {
	position:absolute;
	left:10px;
	top:10px;
}

▼サンプルはこちら

写真の位置は、#innerの左上から10pxのところです。#outerにも#innerにrelativeの指定がありますが、#outerは無視され、#innerが基準になっています。

CSS

*{
	margin:0;
	padding:0;
}
#wrap {
	padding:80px;
}
#outer {
	background-color:#FCC;
	height:700px;
	width:800px;
	margin:0 auto;
	border:1px #000 solid;
	position:relative;
}
#inner {
	margin:100px;
	background-color:#FFF;
	padding:50px;
	position:static;
}
#photo {
	position:absolute;
	left:10px;
	top:10px;
}
}

▼サンプルはこちら

写真の位置は、#outerの左上から10pxのところです。#outerにrelativeの指定があります。先ほど#innerに記述されたrelativeはstaticに変更です。#innerは無視され、#outerが基準になっています。

position:absotuleで基準とする「親ボックス」というのは、直上の要素ということではなく、static以外を指定されている親ボックスということになるんでしょうか…。

なんとなく、分かったような、またまた呪文が増えたような…。見習の道は厳しいものですぅ。

2011年12月10日10:59 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)