[解決済み] コンテナに対する要素の相対位置

質問

HTMLとCSSを使って、横長の100％積み上げ棒グラフを作ろうとしています。棒グラフは DIVs グラフにしたい値に応じて、背景色と幅のパーセンテージを指定します。また、グラフに沿った任意の位置をマークするためのグリッド線が欲しいです。

私の実験では、すでにCSSプロパティ float: left . しかし、この方法はレイアウトを混乱させるようで、避けたいところです。また、バーをフロートさせた場合、グリッド線がうまく機能しないようです。

CSSポジショニングで対応できるはずなのですが、どうすればいいのかまだわかりません。コンテナの左上隅を基準として、複数の要素の位置を指定できるようにしたいのです。この種の問題には定期的に（この特定のグラフプロジェクト以外でも）遭遇するので、そのような方法が欲しいのです。

1. クロスブラウザ（ブラウザをあまりハックしないのが理想的）
2. Quirks モードでの動作
3. カスタマイズを容易にするため、可能な限りクリア／クリーンな状態に
4. 可能な限りJavaScriptなしで行う。

解決方法は？

CSSポジショニングがいいというのはその通りです。以下、簡単に説明します。

position: relative に対して相対的に要素をレイアウトします。 そのものです。 つまり、通常のフローでレイアウトされた後、通常のフローから外され、指定した値（top, right, bottom, left）だけオフセットされるのです。フローから外されるため、周囲の他の要素も一緒に移動しないことに注意してください（この動作が必要な場合は、代わりに負のマージンを使用します）。

しかし、あなたが最も興味を持つのは position: absolute は、コンテナに対する要素の相対位置を指定します。デフォルトでは、コンテナはブラウザウィンドウですが、親要素に position: relative または position: absolute を設定すると、その子の座標を配置するための親として動作します。

デモをするために

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

この例では、左上隅の #box の左上隅から100px下、50px左に位置することになります。 #container . もし #container がない場合は position: relative が設定されている場合、その座標は #box は、ブラウザのビューポートの左上隅を基準としています。