Feste Position, aber relativ zum Container

Question

Ich versuche, eine div so dass es immer am oberen Rand des Bildschirms verbleibt, verwenden:

position: fixed;
top: 0px;
right: 0px;

Allerdings ist die div befindet sich in einem zentrierten Container. Wenn ich position:fixed Es fixiert die div relativ zum Browser-Fenster, z. B. auf der rechten Seite des Browsers. Stattdessen sollte es relativ zum Container fixiert werden.

Ich weiß, dass position:absolute kann verwendet werden, um ein Element relativ zur div , aber wenn Sie auf der Seite nach unten scrollen, verschwindet das Element und bleibt nicht oben, wie bei position:fixed .

Gibt es einen Hack oder eine Umgehung, um dies zu erreichen?

Answer 1

Sie haben eine Lösung, wenn Sie die position: fixed; a position: sticky;

Ihr Code sollte also lauten:

position: sticky;
top: 0;
right: 0;

Jetzt können andere Divs nicht mehr darunter rutschen.

Answer 2

Zwei HTML-Elemente und reines CSS (moderne Browser)

Siehe dieses jsFiddle-Beispiel. Ändern Sie die Größe und sehen Sie, wie sich die festen Elemente sogar mit den schwebenden Elementen bewegen, in denen sie sich befinden. Verwenden Sie die innerste Bildlaufleiste, um zu sehen, wie der Bildlauf auf einer Website funktionieren würde (feste Elemente bleiben fest).

Wie viele hier bereits festgestellt haben, besteht ein Schlüssel darin, keine Positionseinstellungen an der Maschine vorzunehmen. fixed Element (kein top , right , bottom , oder left Werte).

Stattdessen setzen wir alle festen Elemente (beachten Sie, dass das letzte Feld vier davon hat) zuerst in das Feld, von dem aus sie positioniert werden sollen, etwa so:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Dann verwenden wir margin-top y margin-left um sie im Verhältnis zu ihrem Container zu "verschieben", so wie es dieses CSS tut:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Beachten Sie, dass fixed Elemente ignorieren alle anderen Layoutelemente, der endgültige Container in unserer Geige können mehrere fixed Elemente und trotzdem alle Elemente, die sich auf die linke obere Ecke beziehen. Dies gilt jedoch nur, wenn sie alle zuerst im Container platziert werden, wie dieser Vergleich zeigt, wird die Positionierung unzuverlässig, wenn sie im Containerinhalt verstreut ist .

Ob der Wrapper statisch , relativ , oder absolut bei der Positionierung spielt es keine Rolle.

Answer 3

Haftungsausschluss:

Dies ist nur eine Antwort auf den Titel: Feste Position, aber relativ zum Container . Für den eigentlichen Anwendungsfall, nach dem der Benutzer fragt position: sticky ist der richtige Weg.

---

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Er wird relativ zum anfänglichen, durch das Ansichtsfenster festgelegten Block positioniert, es sei denn, einer seiner Vorgänger hat eine Transformations-, Perspektiv- oder Filtereigenschaft, die auf etwas anderes als none eingestellt ist

Sie müssen dem Container nur eine Transformation hinzufügen und die Position des festen Elements wird relativ zum Container sein. Ich denke, ein transform: translateX(0); sollte ausreichend sein.

Answer 4

Sie können mein jQuery-Plugin ausprobieren, FixTo .

Verwendung:

$('#mydiv').fixTo('#centeredContainer');

Answer 5

Mit reinem CSS ist das nicht möglich; zumindest habe ich es nicht geschafft. Mit jQuery kann man es jedoch sehr einfach machen. Ich werde mein Problem erklären, und mit einer kleinen Änderung können Sie es verwenden.

So für einen Start, ich wollte mein Element zu einem festen oben (von oben des Fensters) haben, und eine linke Komponente aus dem übergeordneten Element erben (weil das übergeordnete Element zentriert ist). Um die linke Komponente zu setzen, fügen Sie Ihr Element einfach in das übergeordnete Element ein und setzen position:relative für das übergeordnete Element.

Dann müssen Sie wissen, wie weit Ihr Element vom oberen Rand entfernt ist, wenn die Bildlaufleiste oben ist (y Null gescrollt); es gibt wieder zwei Möglichkeiten. Erstens ist das statisch (irgendeine Zahl) oder Sie müssen es aus dem übergeordneten Element zu lesen.

In meinem Fall sind es 150 Pixel vom oberen statischen Punkt. Wenn Sie also 150 sehen, bedeutet das, wie weit das Element vom oberen Rand entfernt ist, wenn wir nicht gescrollt haben.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});