Kann ich ein Element fest relativ zum übergeordneten Element positionieren?

Question

Ich stelle fest, dass, wenn ich ein Element fest positioniere, es keine Rolle spielt, ob das übergeordnete Element relativ positioniert ist oder nicht, es wird fest positioniert, relativ zum Fenster?

#wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

Answer 1

Lassen Sie mich Antworten auf beide möglichen Fragen geben. Beachten Sie, dass Ihr bestehender Titel (und Ihr ursprünglicher Beitrag) eine andere Frage stellen als die, die Sie in Ihrer Bearbeitung und Ihrem nachfolgenden Kommentar stellen.

---

So positionieren Sie ein Element "fest" relativ zu einem übergeordneten Element wollen Sie position:absolute auf dem untergeordneten Element und ein anderer Positionsmodus als der Standard- oder statische Modus auf dem übergeordneten Element.

Zum Beispiel:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

Dadurch wird die childDiv Element 50 Pixel nach links und 20 Pixel nach unten relativ zur Position von parentDiv.

---

So positionieren Sie ein Element "fest" relativ zum Fenster wollen Sie position:fixed und können top: , left: , right: et bottom: nach eigenem Ermessen zu positionieren.

Zum Beispiel:

#yourDiv { position:fixed; bottom:40px; right:40px; }

Dadurch wird die yourDiv relativ zum Webbrowser-Fenster festgelegt, 40 Pixel vom unteren Rand und 40 Pixel vom rechten Rand entfernt.

Answer 2

Die CSS-Spezifikation verlangt, dass position:fixed mit dem Ansichtsfenster verankert werden, nicht mit dem enthaltenen positionierten Element.

Wenn Sie Ihre Koordinaten relativ zu einem übergeordneten Element angeben müssen, müssen Sie JavaScript verwenden, um zunächst die Position des übergeordneten Elements relativ zum Ansichtsfenster zu ermitteln und dann die Position des untergeordneten (festen) Elements entsprechend festzulegen.

ALTERNATIV : Einige Browser haben sticky CSS-Unterstützung, die die Positionierung eines Elements sowohl innerhalb seines Containers als auch innerhalb des Viewports begrenzt. Gemäß der Commit-Nachricht:

sticky ... erzwingt, dass ein Element innerhalb des Schnittpunkts zwischen seiner Containerbox und dem Ansichtsfenster positioniert wird.

Ein klebrig positioniertes Element verhält sich wie position:relative (der Abstand ist reserviert), aber mit einem Versatz t Sticky-Position bestimmt wird. Geändert isInFlowPositioned() um relative und sticky.

Abhängig von Ihren Designzielen kann dieses Verhalten in einigen Fällen hilfreich sein. Es handelt sich derzeit um einen Arbeitsentwurf, der, abgesehen von Tabellenelementen, eine gute Unterstützung bietet. position: sticky braucht noch eine -webkit Präfix in Safari.

Voir caniuse für aktuelle Statistiken zur Browserunterstützung.

Answer 3

Update 2016

In modernen Browsern ist es jetzt möglich, ein Element relativ zu seinem Container fest zu positionieren. Ein Element, das eine Transform-Eigenschaft hat, fungiert als Ansichtsfenster für jedes seiner untergeordneten Elemente mit fester Position.

Oder wie die CSS-Transformationen Modul drückt es aus:

Bei Elementen, deren Layout durch das CSS-Box-Modell bestimmt wird, führt jeder andere Wert als none für die Eigenschaft transform dazu, dass das Element auch für alle Nachkommen einen Containing Block einrichtet. Sein Auffüllungsrahmen wird für das Layout aller seiner Nachkommen mit absoluter Position, Nachkommen mit fester Position und Nachkommen mit festem Hintergrund verwendet.

.context {
  width: 300px;
  height: 250px;
  margin: 100px;
  transform: translateZ(0);
}
.viewport {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: scroll;
}
.centered {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

<div class="context">
  <div class="viewport">
    <div class="canvas">

      <table>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
      </table>

      <button class="centered">OK</button>

    </div>
  </div>
</div>

Answer 4

Erstens, setzen position: fixed et left: 50% und zweitens - jetzt ist Ihr Startpunkt ein Zentrum und Sie können eine neue Position mit Rand festlegen.

Answer 5

Diese Lösung funktioniert bei mir! Verweis auf die ursprüngliche ausführliche Antwort: https://stackoverflow.com/a/11833892/5385623

    .level1 {
        position: relative;
    }

    .level2 {
        position: absolute;
    }

    .level3 {
        position: fixed;
        /* Do not set top / left! */
    }

    <div class='level1'>
        <div class='level2'>
            <div class='level3'>
                Content
            </div>
        </div>
    </div>