Warum ist meine absolute positionierte div-Vertuschung meine relative-positionierten div -?

Habe ich eine "ribbon" - type-header auf der Oberseite meiner website:

#top-wrapper {
    border-bottom: 5px solid #A1C1BE;
    width: 100%;
    background-color: #59554E;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 100px;
    padding: 10px 0 0 0;
    color: #C0C0A8;
}

Die absolute Positionierung ist erforderlich, um sicherzustellen, es nimmt die gesamte Breite des Browsers des Benutzers (soweit ich weiß). Aber der rest meiner Webseite (der Hauptteil, die enthält alle meine anderen divs) versteckt sich hinter dieser Band:

#pagebody {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

Die einzige Lösung, die ich finden konnten, ist das hinzufügen einer Reihe von <br> zwischen dem Ende der top-wrapper und der Beginn der pagebody.

Gibt es einen besseren Weg, dies zu tun?

  • Eine Geige oder Ihre html würde hier helfen. Jemand hat bereits darauf hingewiesen, absolute Positionierung shouldn't notwendig sein
InformationsquelleAutor n0pe | 2011-11-15
  1. 2

    Als pro meinen Kommentar in der anderen Antwort:

    Können Sie einfach width: 100%, aber stellen Sie sicher, Sie entfernen die Standard Lücke, die er hinterlässt mit:

    html, body {
    margin: 0;
    padding: 0;
}

    Sollten Sie auch heraus überprüfen necolas' normalisieren sich.css. Es enthält alle von dieser grundlegenden CSS-Regeln, die Sie gehen zu müssen, um in so ziemlich jeden Ort 🙂

    InformationsquelleAutor MartinodF
  2. 2

    Absolut positionierte Elemente (top-wrapper) sind immer an der Spitze der relativen Elemente (pagebody), es sei denn, Sie tun etwas hacky Zeug mit z-index (und selbst das ist begrenzt). Was Sie wahrscheinlich tun möchten, bewegen Sie den pagebody element nach unten direkt hinter den top-wrapper. Ich weiß nicht, wie groß dein top-wrapper ist, weil es hat keine festgelegte Höhe. Und Sie vielleicht nicht wissen, es durch font-size unterschieden. Aber insgesamt, Sie einfach hinzufügen müssen, um einen oberen Rand oder Polsterung an der pagebody tag, so etwas wie dieses:

    margin-top:50px;
    • So gibt es nichts falsch mit meinem wrapper oder so was? Der einzige Weg, um dieses ist ein hack, mit margin-top einmal definiere ich die Höhe meiner wrapper?
    • Es ist kein hack. Das ist die typische Verwendung von position absolute. Ich denke, Hacky bedeutet, dass position absolute ist eine seltsame Wahl, um mit zu beginnen, und jede Veränderung an dieser zu Ihren Bedürfnissen passen, ist eine Art hack, da alle Sie tun müssen ist, entfernen Sie die position der Deklaration, sowie top und left und Ort das gesamte element an der richtigen Stelle in den DOM-mit einer Breite von 100% zugewiesen.
    • "Hacky" wurde verwendet, um zu beschreiben, verwenden von z-index speziell, wie es in der Regel nicht funktioniert, als die meisten Menschen erwarten, und erfordert zusätzliche css machen, damit es funktioniert, wie erwartet. Was Sie wirklich wollen, ist, was andere sagen (entfernen Sie die absolute Erklärung), oder wie gesagt, eine Verschiebung der pagebody unten mit margin oder padding.
    InformationsquelleAutor Dwight
  3. 0

    Absolute Positionierung nimmt ein element aus dem normalen Fluss. Sie nicht brauchen, absolute Positionierung zu maximieren Breite. Tun Sie das mit width:100%.

    • Einstellung width: 100%; hinterlässt eine kleine Lücke zwischen dem div und dem browser-Rand.
    • Set margin: 0; padding: 0 auf beiden html und body
    • das ist genau das was ich brauchte. Wenn Sie können, dass in einer Antwort, ich werde es akzeptieren.
    • btw, Sie sollten wahrscheinlich check-out so etwas wie necolas' normalisieren.css. Es enthält alle von dieser grundlegenden CSS-Regeln, die Sie gehen zu müssen, um in so ziemlich jeden Ort 🙂
    • geschrieben die Antwort. Danke!
    InformationsquelleAutor COBOLdinosaur
  4. 0

    Gibt es viele Möglichkeiten, dies zu tun. Ersten, können Sie Ihre top-wrapper außerhalb der pagebody element und dann einfach definieren, dessen Breite wie 100%.

    Wenn Sie eine Grafik, ein Band und es soll überlappen die Spitze der pagebody element - ich glaube, Sie sagen oben, dann würden Sie mit position absolute und z-index zu platzieren Sie es über der pagebody element. Dann fügen Sie die richtige Polsterung-top pagebody.

    Du nicht html, so dass wir nicht wirklich wissen, was du vorhast völlig aus.

    InformationsquelleAutor Kai Qing
Schreibe einen Kommentar