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

LÖSUNG 2019: Sie können Folgendes verwenden position: sticky Eigentum.

Hier ein Beispiel CODEPEN die Verwendung zu demonstrieren und auch, wie sie sich von position: fixed .

Wie sie sich verhält, wird im Folgenden erläutert:

1. Ein Element mit Sticky-Position wird auf der Grundlage der Bildlaufposition des Benutzers positioniert. Es verhält sich im Grunde wie position: relative bis ein Element über einen bestimmten Versatz hinaus gescrollt wird; in diesem Fall wird es zu position: fixed. Wenn es zurückgescrollt wird, kehrt es an seine vorherige (relative) Position zurück.

2. Es wirkt sich auf den Fluss der anderen Elemente auf der Seite aus, d.h. es nimmt einen bestimmten Platz auf der Seite ein (genau wie position: relative ).

3. Wenn er innerhalb eines Containers definiert ist, wird er in Bezug auf diesen Container positioniert. Wenn der Container einen Überlauf (scroll) hat, wird er abhängig vom Scroll-Offset zu position:fixed.

Wenn Sie also die gleiche Funktionalität wie in einem Container haben möchten, sollten Sie sticky verwenden.

Answer 2

Es ist möglich, ein Element mit fester Position relativ zu seinem Container zu positionieren, wenn der Container bestimmte Eindämmung Regeln.

<div class='parent'>
  <div class='child'></div>
</div>

.parent {
  contain: content;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

Answer 3

Nehmen Sie einfach die Stile oben und links aus dem Div mit fester Position heraus. Hier ist ein Beispiel

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

Das #content div wird an der Stelle platziert, an der auch das übergeordnete div sitzt, aber es wird dort fixiert.

Answer 4

Ich habe dieses jQuery-Plugin erstellt, um ein ähnliches Problem zu lösen, das ich hatte, wo ich einen zentrierten Container (tabellarische Daten) hatte, und ich wollte, dass die Kopfzeile am oberen Rand der Seite fixiert wird, wenn die Liste gescrollt wurde, aber ich wollte, dass sie an den tabellarischen Daten verankert wird, damit sie dort ist, wo ich den Container (zentriert, links, rechts) platziert habe, und sie sich auch nach links und rechts mit der Seite bewegen kann, wenn sie horizontal gescrollt wird.

Hier ist der Link zu diesem jQuery-Plugin, das dieses Problem lösen kann:

https://github.com/bigspotteddog/ScrollToFixed

Die Beschreibung dieses Plugins lautet wie folgt:

Dieses Plugin wird verwendet, um Elemente am oberen Rand der Seite zu fixieren, wenn das Element vertikal aus dem Sichtfeld gescrollt wurde; es ermöglicht jedoch, dass sich das Element beim horizontalen Scrollen weiterhin nach links oder rechts bewegen kann.

Mit der Option marginTop hört das Element auf, sich vertikal nach oben zu bewegen, sobald der vertikale Bildlauf die Zielposition erreicht hat; das Element bewegt sich jedoch weiterhin horizontal, wenn die Seite nach links oder rechts gescrollt wird. Sobald die Seite wieder nach unten gescrollt wurde und die Zielposition erreicht hat, wird das Element wieder an seiner ursprünglichen Position auf der Seite platziert.

Dieses Plugin wurde in Firefox 3/4, Google Chrome 10/11, Safari 5 und Internet Explorer 8/9 getestet.

Verwendung für Ihren speziellen Fall:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

Answer 5

Ich musste dies mit einer Anzeige tun, die mein Kunde außerhalb des Inhaltsbereichs platzieren wollte. Ich habe einfach das Folgende gemacht und es hat wunderbar funktioniert!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>