サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
配置方法
配置方法は、positionプロパティを指定します。
IE6に対応するには、「wrapper」部分に、position:relative;を指定します。[メモ]
fixedは、IE6には対応していませんが、IE6へ対応させる方法は、あるようです。CSS-lectureに詳しく書かれていました。
プロパティ名 | 値 | 説明 |
---|---|---|
position: | static; | 通常の位置に表示(デフォルト)
配置方法を指定しない。 |
relative; | 通常の位置を基準とした相対的な位置を指定します。 | |
absolute; | 親要素を基準とした絶対的な位置を指定します。 | |
fixed; | ウィンドウを基準とした絶対的な位置を指定します。
+ 位置を固定します。 |
- 表示位置の指定
- positionプロパティが、relative、absolute、fixed の場合に、指定します。
プロパティ名 | 値 | 説明 |
---|---|---|
top: | ; | 上からの距離を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 auto(自由) |
right: | ; | 右からの距離を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 auto(自由) |
bottom: | ; |
下からの距離を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 auto(自由) |
left: | ; |
左からの距離を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 auto(自由) |
重なりの順序の指定
positionプロパティが、relative、absolute、fixed の場合に指定します。
プロパティ | 値 | 説明 |
---|---|---|
z-index: | ; | 順序を数値で指定(0 に近いほど下になります) |
auto; | (自由)例・・z-index: auto; |
サンプル
[headの中]
<style type="text/css"><!--
.sample{
width: 230px; height: 50px; background-color: #ccff99; font-weight: bold;
position: relative;
}
.static{
width: 150px; height: 50px; background-color: #ffff8e; color: #9999dd;
position: static;
}
.relative{
width: 150px; height: 50px; background-color: #ffff8e; color: #9999dd;
position: relative; top: 20px; left: 20px;
}
.absolute{
width: 150px; height: 50px; background-color: #ffff8e; color: #9999dd;
position: absolute; top: 20px; left: 20px;
}
.fixed{
width: 150px; height: 50px; background-color: #ffff8e; color: #9999dd;
position: fixed; top: 20px; left: 20px;
}
.box1{
width: 500px; height: 60px; background-color: #ccff99; font-weight: bold;
position: absolute; z-index: 1;
}
.box2{
width: 500px; height: 60px; background-color: #ccff99; font-weight: bold;
position: absolute; z-index: 1;
}
width: 200px; height: 45px; background-color: #9999dd;
position: absolute; z-index: 2; top: 0px; left: 250px;
}
.box3{
width: 140px; height: 20px; background-color: #ffff8e;
position:relative; z-index:3; top:0px; left:100px;
}
-->
</style>
[bodyの中]
<div class="sample">position:<div class="static">「static;」</div></div>
<div class="sample">position:
<div class="relative">「relative;」</div></div>
<div class="relative">「relative;」</div></div>
<div class="sample">position:
<div class="absolute">「absolute;」</div></div>
<div class="absolute">「absolute;」</div></div>
<div class="sample">position:
<div class="fixed">「fixed;」</div></div>
<div class="fixed">「fixed;」</div></div>
<div class="box1">z-index:1;<div class="box2">z-index:2;</div>
<div class="box3">z-index:3;</div></div>
<div class="box3">z-index:3;</div></div>
[ブラウザ上]
position:
「static;」
position:
「relative;」
position:
「absolute;」
position:
「fixed;」
z-index:1;
z-index:2;
z-index:3;