4

私はcssを理解しようとしているので、以下の実験的なコードをできるだけ一般的にするために最善を尽くしました.

2 つのボックスがある単純なページがあり、ボックスの 1 つを特定の方法で配置したいと考えていました。その位置をそのように設定する必要がありますがposition:absolute、絶対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 を、margin:25px;ofで設定されている 25 ピクセルのマージンでページを自然に下に流し、 .objecttop_object の後に、各オブジェクトのtop:XXXpx;属性を個別に設定する必要があります。

最初の質問は、なぜ 2 番目のオブジェクトが最初のオブジェクトの上に表示されるのか、また、配置されたオブジェクトがrelative配置されたオブジェクトの下に流れるようにするにはどうすればよいのかということabsoluteです。

次に、フローティング div が使用されていない場合に、背景 div を展開して子 div の周りに配置するにはどうすればよいですか?

さらに、私は何が起こっているのかを理解するために取り組んでいます. css の背後にあるロジックを理解したいのですが、問題を修正する特定のコード スニペットを見ることはあまりありません。

4

1 に答える 1

5

position: absolute;そのオブジェクトをドキュメントフローから完全に削除します。したがってtop: 450px、rightまたはleftセレクターを使用するように指示した場所に正確に表示されます。その配置は、ページの他の要素には影響しません（他のオブジェクトを隠さない限りz-index）。すべてを下に配置する#top_object場合は、それとdisplay: block;必要なマージンを指定する必要があります。

また、overflow: hidden定義された幅または高さの外側にあるものはすべて切り取られるため、min-widthとmin-heightを定義してから、overflow：hiddenではなくautoを使用する必要があります。

于 2012-04-10T17:38:25.270 に答える