ヅラッシュ！ by NI-Lab.

親ブロックには position: relative を指定し、子要素には position: absolute を指定しつつ top や left などの位置を示すプロパティで任意の場所に要素を配置。

ヅラッシュ！ - JavaScript で CSS Transforms するためのウェブブラウザ別 transform と transform-origin 一覧 のサンプルでdiv要素を好きな場所に配置するために使った。

親ブロック: #myfield
子要素: .myitem
の例。

<style type="text/css">
#myfield {
  border: solid 3px #000000;
  width: 500px;
  height: 500px;
  position: relative;
}
.myitem {
  border: dashed 2px #ff0000;
  width: 100px;
  height: 100px;
  position: absolute;
}
</style>

以下、参考資料。

position プロパティは、HTML文書の情報構造を無視して自由自在に要素のブロックを配置するのに向いています。floatプロパティは文書構造の順番にしたがって、文書内の要素のボックスを右へ左へと移動してレイアウトするスタイルでした。しかし、HTMLの文書構造は必ずしもデザインラフを表現しやすい順番であるとは限りません。ある要素はHTML文書内での重要度が低く一番下に位置しているにも関わらず、デザイナーの仕上げたラフではページ上部に配置されることも考えられます。このようなfloatプロパティだけでのデザインの実装が困難なときに、このpositionプロパティの力が発揮されるのです。
(中略)
「position: absolute;」を指定すると、保持されていたboxAのdiv要素のボックスがなくなり、後に続くboxBのdiv要素のブロックがスライドします。つまり、「position: absolute」を指定した場合は、指定した要素が保持していたボックスの大きさが無視されて、あとに続くほかの要素が上にスライドするのです。
(中略)
ボックスの大きさが保持される「position: relative」とボックスの大きさが無視される「position: absolute」の2つに加えて、top（またはbottom）、left（またはright）プロパティでボックスの表示位置を指定し、サイズやマージンなどを調整することでWebページのレイアウトを行うことは可能です。しかし、これはあまり現実的ではありません。

第13回　文書構造にとらわれない「position」によるレイアウト - 今度こそ挫折しない！ CSS入門 - MdN Design Interactive

【例】親ボックスの「左から500px、上から10px」の位置に子ボックスを設置するCSS

親ボックスのCSS
#parent_box {
position:relative;
width:810px;
}

子ボックスのCSS
#child_box {
position:absolute;
left:500px;
top:10px;
width:300px;
}

高さは使用時に設定。内容によりpadding等で対応。
親ボックスのpositionは子ボックスの位置を決める基準点を設定するためのもので、子ボックスのpositionは配置する位置を決定するためのもの。

HTMLの記述
<div id="parent_box">
　<div id="child_box">
　この中に子ボックスの内容
　</div>
</div>

HTMLとCSSの覚書 positionを使って任意の位置にボックスを配置する

tags: css

Posted by NI-Lab. (@nilab)