WEBデザインスクール・4

【WEBサイト制作-CSSのposition】

WEBページをつくるとき、

CSSでレイアウトを指定するのにかかせないのが
■ float：フロート
■ position：ポジション

スクールの先生は、
「この二つが自由に使いこなせるようになると、
たいていのWEBページのコーディングがラクになります」と・・・
その自由自在というのが意外と難しい(>_<)

先週習ったのは、position：ポジション
これは座標を指定することで配置するので、レイヤー的な使い方ができます。
またjavascriptと組み合わせることで動的な表現も可能になります！

まず覚えたいのは、
■ absolute：絶対配置（親要素の左上が基準位置）
　例）position:absolute;　
　　　top:10px;　←上から10px
　　　right:10px;　←右から10px
　　　width:50px;
　　　height:50px;
　　　background-color:#336699;

・重なる順番を指定することができる【z-index】
　例）position:absolute;
　　　top:20px;
　　　right:20px;
　　　z-index:1;　←数値で順番を指示 ＊数値が大きいほど上

■ relative：相対配置（通常の位置からの指定）
・親要素に設定することで、その範囲内での指定ができる
↓こんな感じです
#wrapper{
width:700px;
height:700px;
background-color: #999;
margin:0 auto;
position: relative;
}

#box01{
width:200px;
height:200px;
background-color: #CCC;
position:absolute;
top:200px;
right:200px;
z-index:1;
}

#box02{
width:300px;
height:300px;
background-color: #333;
position:absolute;
bottom:50px;
right:50px;
z-index:2;
}