2011年09月07日

CSS positionプロパティ

スポンサード リンク

 要素の配置方法。positionプロパティ
position:static; position:relative; position:absolute; position:fixed;

* ボーダーに囲まれた領域が親要素です。position : relative;指定
BOX-1
position : static;
BOX-2
position : relative ;
top : 0px ; left : 0px ;
BOX-3
position:absolute;
top: 50px ; left: 150px ;
BOX-4
position : relative ;
top : 10px ; left : 50px ;
BOX-5
positionプロパティの指定なし
BOX-6   移動しません。
position:absolute;
bottom: 10px ; right: 10px ;
position:fixed;

 上のボタンを押すとBOX-3、BOX-4が本来配置される位置(通常位置)に戻ります。
もう一度押すとそれぞれ指定した位置に移動します。
ボックスの移動は要素のID名を動的に換えてスタイルを変更で行っています。
*BOX-3 は親要素が基準位置になり指定した値だけ移動します。
移動前の領域(高さ、幅)は確保されずBOX-4、BOX-5 がせり上がります。

*BOX-4は、BOX-2の左下が通常位置になりここを基準位置に
指定した値だけ移動しています。
通常位置には移動した要素"BOX-4"の領域が確保されたままになっています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ スタンダード

サンプルソース

<html>
 <head>
<title>CSS positionプロパティ</title>
<style type="text/css">
<!--
/*配置のサンプルソースだけです。移動はしません。*/
.parDiv { /* 親要素 */
  width: 450px;
  height: 350px;
  background-color: #f0ffff;
  border : 1px solid black;
  padding: 2px;
  position: relative; /* 相対配置 */
    }
.parDiv div {/* 子要素 */
  width: 200px;
  height: 50px;
  padding: 8px;
    }
#posi1 {
  position: static; /* 通常配置 */
  background-color: #ffff00;
   }
#posi2 {
  position: relative; /* 相対配置 */
  top: 0px; left: 0px;
  background-color: #adff2f;
   }

#posi3 {
  position: absolute;/* 絶対配置 */
  top: 50px; left: 150px;
  background-color: #ee82ee;
   }
#posi4 {
  position: relative;
  top: 10px; left: 50px;
  background-color: #afeeee;
  }
#posi5 {
   background-color: #ffdece;
    }
#posi6 {
  position: absolute;
  bottom: 10px; right: 10px;
  background-color: #d8bfd8;
    }
#fix {position: fixed;/* 固定配置 */
   bottom: 5px; right: 5px;
   color: red; background-color: white;
   font-size: 25px; font-weight: bold;
    }
-->
</style>

</head>
<body>
<div class="parDiv">* ボーダーに囲まれた領域が親要素です。
  <div id="posi1">BOX-1<br>
    position : static;</div>

<div id="posi2">BOX-2 <br>
  position : relative ;<br>
   top : 0px ; left : 0px ;</div>

<div id="posi3">BOX-3 <br>
  position:absolute; <br>
   top: 50px ; left: 150px ;</div>

<div id="posi4">BOX-4 <br>
  position : relative ;<br>
   top : 10px ; left : 50px ;</div>

<div id="posi5">BOX-5 <br>
   positionプロパティの指定なし</div>

<div id="posi6">BOX-6 <br>
  position:absolute; <br>
   bottom: 10px ; left: 10px ;</div>
</div>

<div id="fix">position:fixed;</div>

</body>
</html>

position プロパティ
 要素の配置のしかた(相対配置か絶対配置)を指定します。
実際の配置場所は top,left,bottom,right の位置を指定するプロパティを使い
相対配置または絶対配置の基準位置(top,left は左上。bottom,right は右下)からの位置を指定します。
position: static;
 通常位置に配置されます。通常の位置とは、なにも指定がなければ
本来配置される位置のことです。
top,left,bottom,right プロパティは適用されません。 * BOX-1
position: relative;
 本来配置される位置からtop,left,bottom,right プロパティでどのくらい移動させるかを
指定します。相対配置(相対位置)といいます。 * BOX-2  BOX-4
position: absolute;
 親要素の上、下、左、右、の各辺を基準位置にしてtop,bottom,left,right プロパティで
どのくらい移動させるかを指定します。絶対配置(絶対位置)といいます。
親要素には position:static 以外の position を指定し(当ブログでは relative)
そのなかに子要素を入れて position:absolute を指定をします。* BOX-3  BOX-6
親要素がなければブラウザ枠が基準位置になります。
position: fixed;
 ブラウザ枠が基準位置となり、絶対配置  absolute で配置されますが
スクロールしても位置が変わりません。
ヘッダやフッダ、メニューの固定などに使えますが残念なことにIE6では未対応です。
サンプルは非表示にしてあります。下のボタンを押すとページの右下に表示されます。

↑↑ トグルスイッチ(0と1を切り替え)条件分岐
positionプロパティ 使用サンプル
オンマウスで吹き出し説明文がポップアップ
a:hoverで、へこむアンカーテキスト、リンクボタン
テーブル(表)のセルを重ね、ずらして表示しますz-index
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
画像のズームアップ 初歩編
ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
top,left,bottom,rightプロパティ
 position: relative; は本来配置される位置が基準位置になります。
 position: absolute; は親要素が基準位置になります。
  top :  基準位置の上辺から配置するボックスの上端までの長さ
  left:  基準位置の左辺から配置するボックスの左端までの長さ
  bottom:基準位置の下辺から配置するボックスの下端までの長さ
  right: 基準位置の右辺から配置するボックスの右端までの長さ
上記の値は 数値+単位( px , em など) 又は % で指定します。
パーセントは 親ボックスの高さ・幅に対する割合となります。
 サンプル
top:5px; left:5px; bottom:10px; right:10px; bottom:100%; left:25%;

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ スタンダード
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
スタイルシート クラス名の取得、付け替え
要素のID名を動的に換えてスタイルを変更
サーバーカウボーイ

posted by javaScript at 16:17 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。