|
|---|
配置位置を設定する場合に使うプロパティには、positionのプロパティを使います。
positionのプロパティの値には、static、relative、absoluteを設定します。
値に、relative、absoluteを設定する場合は、top、right、bottom、leftのプロパティとセットで使います
| プロパティ | 説明 |
|---|---|
| static | 標準の配置です(デフォルト) |
| relative | 相対的に配置します。 標準の位置からtop、right、bottom、leftのプロパティで 指定した位置だけ 移動して配置します。 |
| absolute | 絶対的に配置します。 親要素にstatic以外が指定されていた場合、親要素の左上から top、right、bottom、leftのプロパティで指定した 絶対位置に移動して配置し、 それ以外の場合、ウィンドウの左上からの指定した 絶対位置に移動して配置します。 |
top、right、bottom、leftのプロパティの値には、数値+単位を設定します。
relativeとabsoluteの違いが分かりにくいので、サンプルを使って説明したいと思います。
CSSを次のように記述します。
p{
width:400px;
height:300px;
margin-right:auto;
margin-left:auto;
background-color:#66ffff
}
p.positionrelative{
background-color:#6666ff;
position:relative;
}
img.positionrelative{
position:relative;
top:100px;
left:100px;
}
img.positionabsolute{
position:absolute;
top:100px;
left:100px;
}
HTMLは次のように記述します。
<p>
<img class="positionrelative" src="images/image.gif" alt="海中のイメージ" width="200px" height="150px">
<img class="positionabsolute" src="images/backgroundimage.gif" alt="背景のイメージ" width="100px" height="100px">
</p>
<p class="positionrelative" >
<img class="positionrelative" src="images/image.gif" alt="海中のイメージ" width="200px" height="150px">
<img class="positionabsolute" src="images/backgroundimage.gif" alt="背景のイメージ" width="100px" height="100px">
</p>
表示結果を見てわかるとおり、p要素がstaticの場合と、relativeの場合では、画像の表示位置が異なります。
p要素がstaticの場合、positionにabsoluteを設定すると
画面左上を基準として、そこから指定した座標に表示されます。
p要素がrelativeの場合、p要素を基準として、そこから指定した座標に表示されます。
設定をうまくやらないと、予想と違う結果になることがあるので、使う場合は注意が必要です。
まとめ
この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
コメント 0