webentwicklung-frage-antwort-db.com.de

Klare absolut positionierte Elemente mit CSS möglich?

Gibt es eine Möglichkeit, absolut positionierte Elemente mit CSS zu löschen? Ich erstelle eine Seite, auf der jeder Teil der Site (Abschnittselement) absolut positioniert sein muss, und ich möchte eine Fußzeile mit Inhalten unter diesen Elementen anwenden.
Versucht, die Kopf- und Fußzeile relativ zu positionieren, um festzustellen, ob eine Gesamthöhe berücksichtigt wird, die Fußzeile jedoch weiterhin unter den Abschnittselementen "eingeklemmt" wird. 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>
10
Staffan Estberg

Absolut positionierte Elemente sind nicht mehr Bestandteil des Layouts - übergeordnete Elemente haben keine Ahnung, wie groß absolut positionierte untergeordnete Elemente sind. Sie müssen die Höhe des "Inhalts" selbst festlegen, um sicherzustellen, dass die Fußzeile nicht überlappt.

Verwenden Sie keine absolut positionierten Elemente für Layouts, da Elemente aus dem normalen Fluss entfernt werden und die Elemente um sie herum nicht mehr betreffen. Und sie werden nicht von anderen Elementen beeinflusst. 

Verwenden Sie die absolute Positionierung, um Elemente innerhalb eines Containers zu verschieben, wenn die Bedingungen dies zulassen.

Für Floated-Elemente empfehle ich Ihnen, eine bestimmte Clearing-Technik namens Clearfix zu verwenden. Ich benutze es religiös. 

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

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

4
Lex Semenenko

Hatte dieselbe Frage, machte alle absolut positioniert, aber lassen Sie die erste relativ sein, da für das responsive Layout, bei dem sich die Höhe ändert, es geholfen hat, die Höhenänderungen der Elemente zu verfolgen. Beachten Sie in diesem Fall, dass alle Elemente dieselbe Höhe haben:

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

1
o roodie

Ich habe eine einfache Lösung für this gefunden, die möglicherweise nicht alle möglichen Probleme abdeckt, aber zumindest mein Problem gelöst hat.

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;
}
0
cjohansson