Wie "klar" eine position?

Möchte ich erreichen Links: 0 des Körpers, aber ich bin im inneren eine relative position.
Die Möglichkeit haben, dies zu tun, ohne änderung der container-Klasse?

Ich bin auf der Suche nach so etwas wie clear: both von schwimmenden Objekten.

html:

<div class="container">
    <div class="absolute">Content</div>
</div>

Stil:

.container {
    position: relative;
    left: 100px; /*or any other value*/
}

.absolute {
    position: absolute;
    left: 0;
}
  • Wenn Sie hängen die Artikel zurück an den Körper, erreichen Sie body:0. Ansonsten wird die Positionierung immer relativ zu .container. Je nachdem, wie .container eingerichtet ist, können Sie möglicherweise verwenden Sie einen negativen linken position, aber ich würde empfehlen, gegen diese.
  • Eine schnelle Art und Weise zu lösen ist dies mit dem folgenden trick: left: -100px bei .absolute, aber ich denke, dass macht keinen Sinn (zumindest für mich). Aber denke mit mir, Leo, warum willst du die "absolute" etwas auf dem Bildschirm innerhalb einer relativen Ebene?
  • Ich kann nicht mit left:-100px, und leider ich kann nicht gehen aus dem container.
  • Ok, ich bin verwirrt. Wollen Sie bleiben an der äußersten linken Seite des Containers, richtig?
  • Ich kann nicht mein Objekt außerhalb der .container-aber ich brauche das erreichen der linken:0 des Körpers und ich kann es nicht ändern .container-Klasse.
  • Mir scheint es ein code Problem sein, weil wenn Sie möchten, um eine Ebene außerhalb des anderen, grundsätzlich und wörtlich müssen Sie nur halten Sie es außerhalb. Durch die Art und Weise, eine Sache, die Sie tun können, ist zu zwingen, die linke Positionierung erneut, nun aber mit margin-left: -100px. Wenn dies nicht funktioniert, dann kann/sollte, verwenden Sie ein wenig von JavaScript.
  • Ist dieses eine interview-Frage, oder was? Jedes mal, wenn jemand behauptet etwas, die Sie hinzufügen, "Nein, ich kann nicht verwenden, die Lösung". Das riecht nach einem test, eine Herausforderung...
  • Wenn Sie sich ändern könnte, das .container css, als es position: static und verwenden Sie margin oder padding zu verlagern über.

InformationsquelleAutor Leo | 2013-08-06
  1. 6

    Was Sie für Fragen verstößt gegen die beabsichtigte Nutzung des absolut-positionierte Elemente innerhalb eines relativ enthaltenden block. Die CSS2-spec sagt:

    Obwohl die übergeordnete box ist nicht wirklich ausgeglichen werden, indem dessen 'position' - Eigenschaft auf 'relativ' bedeutet, dass die box dienen können, wie das mit block für positionierte Nachkommen.

    Irgendeiner Weise zu tun, was du fragst ist ein hack, und Sie sollten überdenken, entweder (a) warum müssen Sie die Hierarchie zu sein, wie es ist, oder (b) warum benötigen Sie den enthaltenden block werden relativ positioniert.

    • Ich glaube nicht wirklich, in eine einfache Lösung, die ich gebeten zu warten, für einen Magier hack. Ich lasse die Frage offen, um zu sehen, ob etwas kommt. Danke für die Antwort.
    • Jonathan hat Recht. Zum Beispiel, wenn Sie brauchen nur zu bewegen .container 100px nach rechts, es gibt viele Möglichkeiten, das zu tun, ohne Positionierung!
    • Dies ist nur ein Beispiel.
    • Okay. Ich noch befürworten (für jeden Leser, diese Frage) die Vermeidung jeglicher hack, dass kann gepostet bekommen in der Zukunft... es ist viel besser für die Lesbarkeit und Wartbarkeit des Codes, um die Struktur der DOM als angemessen zu verwenden, hacks und workarounds, um das gewünschte layout.
    • Ja. @Leo, auch wenn Sie nicht ändern können, die HTML, können Sie immer noch ein wenig Javascript zu reißen, die innere div-Element aus seinem Behälter heraus und legte Sie neben ihn in die DOM.
    InformationsquelleAutor Jon Newmuis
  2. 0
    .container {
    position: relative;
    left: 100px; /*or any other value*/
    overflow: visible
}

.absolute {
    position: absolute;
    left: 0;
}
    • Sie sollte beschreiben Sie Ihre Lösung und erklären, warum es das problem lösen...
    InformationsquelleAutor Frederick
  3. 0

    Dem Weg war ich in der Lage, dieses problem zu lösen, wurde mit dem Stichwort "initial". Dieser stellt eine Eigenschaft zu der default-Wert.

    CSS:

    #yourElement {
  position:initial;
}

    Weitere Informationen entnehmen Sie bitte : https://www.w3schools.com/cssref/css_initial.asp
    und https://www.w3schools.com/cssref/pr_class_position.asp
    Hoffe, das hilft!

    InformationsquelleAutor Stemonitis
Schreibe einen Kommentar