Klar, absolut positionierte Elemente mit CSS möglich?

Gibt es eine Möglichkeit, klar, absolut positionierte Elemente mit CSS? Ich bin eine Seite erstellen, wo ich jeden Teil der Website (section-element) werden absolut positioniert, und ich möchte eine Fußzeile mit Inhalt unterhalb dieser Elemente.
Versucht, relativ-position der Kopf-und Fußzeile, um zu sehen, wenn Sie eine Gesamthöhe berücksichtigt werden, aber der footer wird immer noch "gefangen" unter den "section" - Elemente. Irgendwelche Ideen?

<header style="position: relative;"></header>

<div id="content" style="position: relative;">

    <section id="a" style="position: absolute;"></section>

    <section id="b" style="position: absolute;"></section>

    <section id="c" style="position: absolute;"></section>

    <section id="d" style="position: absolute;"></section>

    <section id="e" style="position: absolute;"></section>

</div>

<footer style="position: relative;"></footer>
  • absolut positionierte Elemente sind nicht gefloateten Elemente, daher gibt es nichts wie deaktivieren Sie..
  • Ich würde auch sagen, dass es keine Möglichkeit gibt, dies zu tun, ohne JavaScript.
  • Ich sehe. Aber Sie verstehen, was ich bin nach Wann ich meine "klar"? Ein Verhalten an den nächsten übergeordneten unter den bisherigen Inhalt.
InformationsquelleAutor Staffan Estberg | 2012-10-10
  1. 18

    Absolut positionierte Elemente sind nicht mehr Teil der layout - Eltern-Elemente haben keine Ahnung, wie groß absolut positionierten Kind-Elemente sind. Sie müssen die Höhe des "content" selbst, um sicherzustellen, dass es keine überschneidungen der Fußzeile.

    InformationsquelleAutor Diodeus - James MacFarlane
  2. 4

    Nicht absolut-positionierte Elemente für layouts da, dass Elemente entfernt werden aus dem normalen Fluss und nicht mehr auf die Elemente um Sie herum. Und Sie sind nicht unabhängig von anderen Elementen.

    Absolute-Positionierung zum verschieben von Elementen innerhalb eines Containers, wenn die Bedingungen es zulassen.

    Für die gefloateten Elemente ich schlage vor, Sie verwenden eine spezifische clearing-Verfahren genannt, clearfix. Ich benutze es religiös.

    http://nicolasgallagher.com/micro-clearfix-hack/

    http://jsfiddle.net/necolas/K538S/

    • Ich bin sehr vertraut mit, wie der Annäherung an eine regelmäßige Struktur, doch für dieses Szenario muss ich diese Elemente absolut positioniert werden. Ich entschloss mich für eine JS-Lösung statt.
    • wenn noch möglich, könnte Sie posten Sie Ihre js-Lösung?
    InformationsquelleAutor Lex Semenenko
  3. 2

    Hatte dasselbe Problem, alle absolut positioniert, aber lassen Sie die erste relative, als für responsive layout, wo die Höhe nicht verändert, es half, um zu verfolgen die Elemente, die die Höhe ändert, beachten Sie in diesem Fall alle Elemente haben die gleiche Höhe:

    CSS:

    .gallery3D-item {
    position: absolute;
    top: 0;
    left: 0;
}
.gallery3D-item:first-of-type {
    position: relative;
    display: inline-block;
}

    InformationsquelleAutor o roodie
  4. 0

    Entdeckte ich eine einfache Lösung, um diese, es könnten nicht alle denkbaren Probleme, aber zumindest ist es mein problem gelöst.

    HTML:

    <p>Content before</p>
<div class="offset-wrapper">
    <div class="regular">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
    <div class="special">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
</div>
<p>Content after</p>

    CSS:

    .offset-wrapper {
  background: green;
  position: relative;
  width: 100px;
}
.offset-wrapper .regular {
  visibility: hidden;
}
.offset-wrapper .special {
  bottom: -15px;
  left: -15px;
  position: absolute;
}
    InformationsquelleAutor cjohansson
Schreibe einen Kommentar