要素を削除して追加しながらCSSを配置する際の助言

Question

私は3つの入力と画像を持っています（x yとzの測定に関連しています）。彼らはすべてかなり公平に配置されているので、正確な値を得るために左と上のpx値を使用しています。これまで私は相対的な配置を使用してきました。

私の問題はチェックボックスを変更したときです。私はz入力を隠してイメージを変更します。私がこれをすると、すべてが恐ろしい方法で変わる。また、ページの下部には、画像のために負のトップ値を使用することになるかもしれない多くの空白があります。

私は絶対配置を使用すべきか、それとも別のものを使用すべきですか？

おかげで、

リック

FIDDLE：http://jsfiddle.net/WY2DX/52/（SCSSを使用すると、CSSの問題かもしれ：S）

Answer 1

あなたは要素の追加と削除する必要があると仮定は、おそらく相対的位置付けを使用するべきではありません。相対的とは、要素が配置に関してDOMから削除されないことを意味します。したがって、要素のサイズと位置が次の要素に影響します。

Learn CSS Positioning in Ten Stepsは、greatチュートリアルです。このチュートリアルでは、さまざまな測位方法を実行できます。あなたが探しているものは、親コンテナの場合はのステップ4、position:relative、次にx、y、zラベルの場合はposition:absoluteとなります。

EDIT：

は、私はあなたの例が動作するようになっているかに完全に明確ではないんだけど、ラベルが本当に自然にまたは画像がある場合に配置されることを意図している場合、私は疑問に思って？また、ラベルを通常の位置にし、画像にposition:absoluteを使用することを検討することもできます。

http://jsfiddle.net/vh5pY/3/

Answer 2

あなたが使用しているものの基本的なマークアップ/ CSSの設定を証明してもらえますか？

しかし、はい、両方の問題は、[position：relative;]を使用して元の位置から相対的に要素を配置するときに発生します。要素 'A'が最初に0、0（X、Y）に存在し、あなたが{position：relative;左：120ピクセル、上：120ピクセル、 }、要素 'A'は120、120（X、Y）に再配置されますが、それでも0,0（X、Y）の '物理空間'を占有します。これで、要素の1つを隠したり削除したりすると、「物理空間」は使用されなくなり、残りのコンテンツは変更に対応するようにシフトします。

これを避けるために絶対配置を使用することもできますが、使用のコンテキストによっても異なる場合があります。

Answer 3

親コンテナの相対的な配置と各子アイテムの絶対的な配置を使用します。そのようにして子要素を追加または削除しても、その兄弟要素のいずれにも影響はありません。