私はcssを理解しようとしていますので、下の実験コードを可能な限り一般的なものにするために最善を尽くしました。絶対要素の後に相対要素を配置し、親divを子供に合わせて展開する方法はありますか？
私は単純なページを2つのボックスで持っていますが、Why does setting the `right` CSS attribute push an element to the left?のようにその位置を設定する必要がある特定の方法でボックスの1つを配置したかったのですが、今は落ちるdivを追加します私の絶対divの下に、さらに、私は親divが子divのサイズに合わせて展開されることを望みます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#outer {
position : relative;
background-color : green;
width : 500px;
height : 500px;
/* overflow : hidden; */
/* I know from working with floating elements inside divs that this works
* to cause parent divs to exand out around floating children, but this
* does not do the same thing here, it lops off the bottom of the child divs
* if I un-comment the preceding line!
*/
}
#inner {
position : absolute;
background-color : blue;
height : 400px;
width : 400px;
top : 10px;
right : 20px;
}
#top_object {
position : absolute;
top : 450px;
}
.object {
position : relative;
width : 450px;
height : 200px;
background-color : yellow;
margin-bottom : 25px;
}
/* The followsing was suggested by:
https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content
But has no effect!
*/
.clear {
clear : both;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
<div id="top_object" class="object">
Top Object
</div>
<div class="object">
Second Object
</div>
<div class="clear"></div>
</div>
</body>
</html>
クラスオブジェクトとID top_objectを持つ最初のdivを表示するように、上から絶対距離に配置したいと考えています。しかし、私はさらにオブジェクトdivがトップオブジェクトの下を流れるようにしたいと思います。つまり、top_objectを使用してdivオブジェクトの最初のインスタンスの絶対位置をクラスオブジェクトで定義し、クラスオブジェクトで次のdivを持つようにしたい場合は、に設定された25ピクセルのマージンで、各オブジェクトのtop:XXXpx;属性を個別に設定する必要はありません。
私の最初の質問は、私の最初のオブジェクトの上に2番目のオブジェクトが表示されていることです。relative配置オブジェクトをabsoluteオブジェクトの下に移動させるにはどうすればよいですか？
第2に、浮動小数点数を使用しない場合、バックグラウンドdivを拡大し、子供divを周りに取得するにはどうすればよいですか？
また、私の質問に対する直接的な答えは理解できますが、なぜ私がやっていることが間違っているのか、何らかの解決策でそれを解決する理由についての説明を聞きたいと思います。私はcssの背後にあるロジックを理解したいと思っていますが、問題を修正する特定のコードスニペットを見るのはあまりありません。
これはプログラミングの問題ではないので、それはおそらくより良い[http://webmasters.stackexchange.com/](http://webmasters.stackexchange.com/でオーバー頼まれる） –
私はあなたを再考するためにあなたに挑戦でしょうアプローチ。あなたが考えるかもしれないほど頻繁に絶対的な位置付けは必要ありません。たとえば、 '＃top_object'では、余白を450pxにして相対的にしてみませんか？あなたはなぜインナーを絶対的に配置する必要がありますか？なぜそれは、例えば、「浮動小数点：右」ではないのですか？ –
ok、私はそれを試みたが、すべてを450pxだけ動かす。浮動小数点の使用：相対配置で右に配置しますが、すべてを450ピクセル下げます。 –