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

Eine andere seltsame Lösung, um eine relative feste Position zu erreichen, ist die Umwandlung Ihres Containers in einen iframe, so dass Ihr festes Element an den Viewport des Containers und nicht an die gesamte Seite gebunden werden kann.

Answer 2

Ja, das ist möglich, solange Sie die Position nicht festlegen ( top o left , etc.) Ihrer fixed Element (Sie können weiterhin das margin um eine relative Position festzulegen). Simon Bos vor einer Weile darüber gepostet .

Erwarten Sie jedoch nicht, dass ein feststehendes Element mit nicht feststehenden Verwandten blättert.

Siehe eine Demo hier .

Answer 3

Ich habe dasselbe Problem, eines unserer Teammitglieder gibt mir eine Lösung. Um die div fix Position und relativ zu anderen div erlaubt, ist unsere Lösung, um eine übergeordnete Container wickeln die fix div und scroll div verwenden.

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  position:absolute;
}

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

Answer 4

Das ist ganz einfach (siehe HTML unten)

Der Trick besteht darin, NICHT top oder left auf dem Element (div) mit "position: fixed;" zu verwenden. Wenn diese nicht angegeben werden, erscheint das Element mit "festem Inhalt" RELATIV zum umschließenden Element (das div mit "position:relative;") UND NICHT relativ zum Browserfenster!!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Oben konnte ich eine schließende "X"-Schaltfläche am oberen Rand einer Menge von Text in einem Div mit vertikalem Scrollen zu lokalisieren. Das "X" sitzt an Ort und Stelle (bewegt sich nicht mit dem gescrollten Text und bewegt sich dennoch nach links oder rechts mit dem umschließenden div-Container, wenn der Benutzer die Breite des Browserfensters ändert! Es ist also vertikal "fixiert", aber horizontal relativ zum umschließenden Element positioniert!

Bevor ich das hinbekommen habe, ist das "X" nach oben gescrollt und aus dem Blickfeld geraten, wenn ich den Textinhalt nach unten gescrollt habe.

Entschuldigen Sie, dass ich meine Javascript hideDiv()-Funktion nicht zur Verfügung stelle, aber das würde diesen Beitrag unnötig verlängern. Ich habe mich dafür entschieden, ihn so kurz wie möglich zu halten.

Answer 5

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>

/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}