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)
森歩き日記
自称パソプロ化計画
