web-dev-qa-db-ja.com

CSSを使用して、コンテナに対してHTML要素を配置します

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

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

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

  1. クロスブラウザー（理想的にはブラウザーのハッキングが多すぎない）
  2. Quirksモードで実行
  3. 可能な限り明確/クリーンで、カスタマイズを容易にします
  4. 可能であればJavaScriptなしで完了します。
htmlcsspositioning
176
Craig Walker

あなたは、CSSポジショニングが進むべき道であることは正しいです。以下に簡単に説明します。

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

ただし、おそらくコンテナに関連して要素を配置するposition: absoluteに興味があります。デフォルトでは、コンテナはブラウザウィンドウですが、親要素にposition: relativeまたはposition: absoluteが設定されている場合、それは子の座標を配置するための親として機能します。

実証するには：

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

#container {
  position: relative;
}

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

その例では、#boxの左上隅は100ピクセル下、#containerの左上隅の左50ピクセルになります。 #containerにposition: relativeが設定されていない場合、#boxの座標は、ブラウザーのビューポートの左上隅を基準にします。

お役に立てば幸いです。

363
Bryan M.

親コンテナの位置と子コンテナの位置を明示的に設定する必要があります。その典型的な方法は次のようなものです。

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

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

私は遅れていることは知っていますが、これが役立つことを願っています。

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

  • 静的
  • 一定
  • 相対
  • 絶対の

position：static

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

#myelem {
    position : static;
}

position：fixed

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

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

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

位置：相対

元の位置を基準にして新しい位置に要素を配置します。

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

上記のCSSは、#myelem要素を30pxで左に移動し、実際の位置の上部から30pxを移動します。

position：absolute

要素をページ内の正確な位置に配置する場合。

#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;
}

Absolute position of a child element w.r.t. a Relative positioned parent element.

上記の画像では、＃div-2要素が内の右上隅に配置されています#container要素。

GitHub：上記の画像 here およびCSS here のHTMLを見つけることができます。

これを願っています チュートリアル 助けて。

12
yusufshakeel

絶対配置では、最も近い配置先祖に対して要素を配置します。したがって、position: relativeをコンテナに配置すると、子要素の場合、topおよびleftは、子要素にposition: absoluteが含まれている限り、コンテナの左上を基準にします。詳細については、 CSS 2.1仕様 を参照してください。

3
Jim

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

そのため、子要素を親コンテナの左上に配置する場合は、次のようにする必要があります。

.parent {
  position: relative;
} 

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

この記事 を読むことで大きな恩恵を受けるでしょう。お役に立てれば！

0
Nesha Zoric