warum div Zusammenbruch mit relativer/absoluter Positionierung?

Habe ich behandelt mit divs reduzieren, auf Ihre Inhalte bei der Verwendung von float-Positionierung (z.B. lösen von Problemen mit overflow:hidden), aber ich versuche zu lernen, absolute/relative Positionierung und kann nicht herausfinden, warum die div-container, in sich zusammenstürzt. Mein test-Fall:

<html>
  <head>
    <style type="text/css">
      body {
        background-color:#eee;
      }

      #content {
        margin:0 auto;
        position:relative;
        border:1px solid red;
        width:800px;
        display:block;
        background-color:white;
      }

      #header {
        border:1px solid black;
        background-color:#777;
        color:white;
        width:800px;
        position:absolute;
        left:0;
        top:0;
      }

      #leftcol {
        position:absolute;
        border:1px solid black;
        background-color:#ddd;
        width:200px;
        top:100px;
        left:0;
      }

      #rightcol {
        position:absolute;
        top:100px;
        left:205px;
        border:1px solid black;
        background-color:#ddd;
        width:500px;
      }

    </style>
    <title>CSS Positioning Example 1</title>
  </head>

  <body>
    <div id="content">

      <div id="header">
        <h1>The Awesome Website</h1>
      </div>

      <div id="leftcol">
        <h2>About</h2>
        <p>
        This website is so awesome because it was made by someone
        and that is really all there is to it.  There.
        </p>
      </div>

      <div id="rightcol">
        <p>This is where I'm going to put some real body text so that it goes
        on and on for a while and so I can get a sense of what happens when
        the text in the paragraph keeps going and the box containing it keeps
        going on as well.
        </p>
      </div>

    </div>

  </body>
</html>

Was ist denn hier Los? Warum hat die rot-gesäumt Inhalt div Zusammenbruch, obwohl es enthält die anderen divs?

JSBin: jsbin.com/exukoc

InformationsquelleAutor mix | 2011-09-20

  1. 8

    Ist es, weil alle seine Inhalte ist gestaltet wie position:absolute. Dies nimmt die Elemente aus der Strömung und der (layout-Weise) es ist, als ob Sie gar nicht existieren. Erwägen Sie die Verwendung position:relative zum positionieren der Inhalte.

    ty für die Rechtschreib-und Grammatik-Korrekturen, @sscirrus. es ist zu spät. 😛
    Ich dachte, der Punkt mit absolut positionierte Elemente war, um Sie innerhalb eines relativ positionierten Vorfahren? Nicht position:absolute relativ zu seinen Vorfahren?
    natürlich! Nette Antwort, und ein +1 von mir.
    sind im Vergleich zu Ihren Vorfahren haben, aber Sie sind noch immer aus dem Fluss der anderen - Elemente in Ihre Vorfahren.

    InformationsquelleAutor Joseph Marikle

  2. 3

    Sie wirklich brauchen, um Lesen Sie diese Artikel bei A List Apart

    "CSS-Positionierung 101

    "CSS Floats 101

    Ihre Frage ist, warum das div mit der roten Grenzen nicht erweitern, es ist Inhalt. Als Joseph sagte, das problem ist, dass man die Elemente aus dem Dokument fließen. Positionierung ein element absolut Sie das element an die position unabhängig von Eltern und Geschwistern.

    Ich Feste Ihren code mithilfe CSS-Eigenschaft float. Werfen Sie einen Blick hier.

    Ich empfehle Ihnen, Lesen Sie diesen Artikel.

    thx für die tollen links. Total geholfen.

    InformationsquelleAutor Mohsen

Schreibe einen Kommentar