194

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

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

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

  1. クロスブラウザー (理想的には、ブラウザーのハッキングが多すぎないこと)
  2. Quirks モードで実行
  3. カスタマイズを容易にするために、できるだけ明確でクリーンな
  4. 可能であれば JavaScript なしで行います。
4

5 に答える 5

396

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>

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

于 2008-09-19T20:01:06.260 に答える
20

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

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

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}
于 2008-09-19T19:50:53.510 に答える
16

遅れていることは承知していますが、これがお役に立てば幸いです。

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

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

位置 : 静的

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

#myelem {
    position : static;
}

位置：固定

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

(ページの右下隅にスクロール・トゥ・トップ・ボタンが必要な場合に理想的です)。

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

位置 : 相対的

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

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

上記の CSS は、#myelem 要素を実際の位置の左に 30 ピクセル、上から 30 ピクセル移動します。

位置：絶対

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

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

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

そして最後に...

相対位置 + 絶対位置

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

#container {
    position : relative;
}

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

相対的に配置された親要素に対する子要素の絶対位置。

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

GitHub: 上の画像の HTML はここに、CSSはここにあります。

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

于 2017-06-29T08:09:41.610 に答える
3

絶対配置では、最も近い配置先祖に対して要素を配置します。したがってposition: relative、コンテナに配置し、次に子要素をtop配置leftし、子要素にposition: absolute. 詳細については、CSS 2.1 仕様を参照してください。

于 2008-09-19T19:53:05.610 に答える