■概要
position属性は、タグをどこに配置するかを定義します。
以下の5つの値が使えます。
座標を指定するためにはleft, right, top, bottom属性と一緒に使います。
positionをabsoluteまたはfixedで設定した場合横幅が100%になるblockタグの特徴が無くなります。
■使用方法
#box1 { position:static }
#box2 { position:absolute }
#box3 { position:relative }
#box4 { position:fixed }
#box5 { position:inherit }
■例
<html>
<head>
<style>
.box-container1 {
width: 200px;
border: 2px solid #e91bf5;
}
.box-container1 div {
padding: 10px;
border: 1px solid green;
background-color: #e3ffe0;
}
#box11 { position: static; top: 20px; left: 30px; }
#box12 { position: relative; top: 20px; left: 30px; }
#box13 { position: absolute; top: 20px; right: 30px; }
#box14 { position: fixed; top: 20px; right: 30px; }
</style>
</head>
<body>
<div class=”box-container1″>
<div id=”box11″>staticボックス</div>
<div id=”box12″>relativeボックス</div>
<div id=”box13″>absoluteボックス</div>
<div id=”box14″>fixedボックス</div> <!– ‘出力結果’欄でなく全体ページで固定 –>
</div>
</body>
</html>
出力結果
staticボックスrelativeボックスabsoluteボックスfixedボックス
■absoluteとrelative
relative属性のコンテナ内部に、absolute属性のオブジェクトがあると、絶対座標を求める時にrelativeコンテナを基準にします。
※relativeコンテナが存在しない場合は、全体文書(上記、使用方法の例のように)を基準にします。
■例
<html>
<head>
<style>
#box-container{ position: relative; height: 90px; margin-top: 40px; border: 2px solid red; }
#box-inner{ position: absolute; top: 30px; left: 20px; border: 2px solid blue; }
</style>
</head>
<body>
<div id=”box-container”>
コンテナ
<div id=”box-inner”>absoluteボックス</div>
</div>
</body>
</html>
出力結果
コンテナabsoluteボックス
