コンテナを基準に要素を配置する

HTMLとCSSを使用して、水平100％積み上げ棒グラフを作成しようとしています。DIVsグラフ化する値に応じて、背景色とパーセンテージ幅を使用してバーを作成したいと思います。また、グラフに沿った任意の位置をマークするグリッド線も必要です。

私の実験では、CSSプロパティを割り当てることにより、バーを水平に積み重ねていますfloat: left。しかし、混乱を招くようにレイアウトを混乱させているように思われるため、これは避けたいと思います。また、バーをフロートさせると、グリッド線がうまく機能しないようです。

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

1. クロスブラウザ（理想的にはあまり多くのブラウザハックなし）
2. Quirksモードで実行します
3. カスタマイズを容易にするために、可能な限り明確/クリーン
4. 可能であればJavaScriptなしで実行されます。

CSSポジショニングが進むべき道だというのはあなたの言うとおりです。ここに簡単な要約があります：

position: relativeそれ自体に相対的な要素をレイアウトします。つまり、要素は通常のフローでレイアウトされ、通常のフローから削除され、指定した値（上、右、下、左）によってオフセットされます。フローから削除されているため、その周りの他の要素は移動しないことに注意してください（この動作が必要な場合は、代わりに負のマージンを使用してください）。

ただし、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ブラウザビューポートの左上隅を基準とします。

親コンテナーの位置と子コンテナーの位置を明示的に設定する必要があります。これを行う一般的な方法は次のようなものです。

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

私は遅れていることを知っていますが、これが役に立てば幸いです。

以下は、positionプロパティの値です。

• 静的
• 修繕
• 相対的
• 絶対の

位置：静的

これがデフォルトです。これは、要素が通常発生する位置に出現することを意味します。

#myelem {
    position : static;
}

位置：固定

これにより、ブラウザウィンドウ（ビューポート）に対する要素の位置が設定されます。固定位置の要素は、ページがスクロールしてもその位置に残ります。

（ページの右下隅にある一番上にスクロールするボタンが必要な場合に最適です）。

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

位置：相対的

元の位置に対して新しい位置に要素を配置すること。

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

上記のCSSは、＃myelem要素を実際の場所の左から30px、上から30px移動します。

位置：絶対

要素をページの正確な位置に配置したい場合。

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

上記のCSSは、＃myelem要素をページの上から30px、左から300pxの位置に配置し、ページと共にスクロールします。

そして最後に...

相対位置+絶対位置

親要素のpositionプロパティをrelativeに設定してから、子要素のpositionプロパティをabsoluteに設定できます。このようにして、親に対して相対的な絶対位置に子を配置できます。

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

上の画像から、＃div-2要素が#container要素の右上隅に配置されていることがわかります。

GitHubの：あなたは上の画像のHTML見つけることができるこことCSS こちらを。

このチュートリアルがお役に立てば幸いです。

絶対配置では、最も近くに配置された祖先を基準にして要素が配置されます。だから、入れposition: relative子要素のために、その後、容器上に、topそしてleft限り、子要素を持っているように左上の容器のに対して相対となりますposition: absolute。詳細については、CSS 2.1仕様を参照してください。

要素をその要素を含む要素に対して相対的に配置する必要がある場合は、最初position: relative にコンテナ要素に追加する必要があります。親に対して相対的に配置したい子要素は持っている必要があり position: absoluteます。絶対配置が機能する方法は、最初に相対的に（または絶対的に）配置された親要素に対して相対的に行われることです。相対的に配置された親がない場合、要素はルート要素（HTML要素に直接）に対して相対的に配置されます。

したがって、子要素を親コンテナの左上に配置する場合は、次のようにします。

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

この記事を読むと、大きなメリットがあります。お役に立てれば！