Wie eine relative element nach einem absoluten element und Ursache Eltern-div zu erweitern, um fit Kinder?

Ich versuche zu verstehen, css, und so versuchte ich mein bestes, um meine experimentelle folgenden code so allgemein wie möglich.

Habe ich eine einfache Seite, mit zwei Boxen, ich wollte einer der Boxen positioniert werden, die auf eine bestimmte Weise, die nach Warum funktioniert die Einstellung der "richtigen" CSS-Attribut-push ein element auf der linken Seite? verlangt von mir, um seine position so position:absolute ich Jedoch jetzt hinzufügen möchten, einige divs, die darunter zu fallen, meine absolute div, außerdem möchte ich das Eltern-div zu erweitern, um Sie an die Größe des Kindes divs.

<!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>

Ich würde gerne meine ersten div mit der Klasse object und id top_object positioniert, an eine absolute Entfernung von der Spitze wie es scheint. Allerdings würde ich dann auch gerne weiter-Objekt divs fließen unterhalb des top-Objekt. In anderen Worte, die ich verwenden möchten top_object zu definieren, die eine absolute position der ersten Instanz von div mit class-Objekt und dann haben die nachfolgenden divs mit class-Objekt natürlich fließen nach unten der Seite, mit einem 25px margin wie in margin:25px; von .object nach top_object, ohne dass jedes Objekt top:XXXpx; Attribut getrennt.

Meine erste Frage ist, warum funktioniert meine zweite Objekt erscheinen vor meinem ersten Objekt, und wie kann ich die Ursache relative positionierte Objekte zu fließen, die unter einem absolute positionierten Objekt?

Zweiten wie bekomme ich die hintergrund-div zu erweitern und um die Kinder divs beim floating divs werden nicht verwendet?

Desweiteren arbeite ich, um zu verstehen, was passiert ist, obwohl eine direkte Antwort auf meine Frage wäre schön, ich würde gerne eine Erklärung zu hören, warum das, was ich Tue, falsch ist, und warum jede andere Lösung würde zu beheben. Ich möchte verstehen, die Logik hinter der css, nicht so viel zu sehen, einen bestimmten code-snippet, das das Problem behebt, obwohl, dass wäre schön, auch!

Da dies nicht eine Frage der Programmierung, es ist wohl besser gefragt, über auf http://webmasters.stackexchange.com/
Ich fordere Sie auf, überdenken Sie Ihre Herangehensweise. Absolute Positionierung ist nicht notwendig, fast so oft wie Sie vielleicht denken. Zum Beispiel, mit #top_object, warum machst du es nicht relativ mit margin-top von 450px? Und warum brauchen Sie, um innere absolut positioniert? Warum kann es nicht sein, zum Beispiel float: right;, aber relativ positioniert?
ok, ich versucht, aber es verschiebt sich alles nach unten von 450px. und mit float : right mit relativer Positionierung, sondern schiebt alles nach unten von 450px.

InformationsquelleAutor john-charles | 2012-04-10

Schreibe einen Kommentar