CSS-Position: in einem positionierten Element fixiert

Question 1

Ich habe ein positioniertes div, dessen Inhalt zu lang sein kann, sodass Bildlaufleisten angezeigt werden (overflow:auto einstellen). Es fungiert als Dialogfeld in einer Ajax-App. Ich möchte eine Schließen-Schaltfläche in der rechten oberen Ecke fixieren, damit der Benutzer beim Scrollen des Div nicht wegscrollt.

Ich habe es mit probiert position:fixed; right:0; top:0 aber es platzierte die Schaltfläche rechts oben auf der Seite nicht im div (in Firefox).

Ist es möglich, diese Schaltflächenplatzierung nur mit CSS durchzuführen, ohne bei jedem Scroll-Ereignis mit offsetWidth/Height in js zu hacken?

PS: Die Höhe und Breite des div ist kein fester Wert, sondern hängt von der Größe des Inhalts und der Größe des Browserfensters ab. Der Benutzer kann die Größe auch ändern, wenn er möchte.

Question 2

Du kannst den … benutzen position:fixed;aber ohne Satz left und top. Dann schieben Sie es mit nach rechts margin-leftum es an der gewünschten Position zu positionieren.

Sehen Sie sich hier eine Demo an: http://jsbin.com/icili5

Question 3

Die aktuell gewählte Lösung scheint das Problem missverstanden zu haben.

Der Trick besteht darin, weder absolute noch feste Positionierungen zu verwenden. Stattdessen haben Sie die Schließen-Schaltfläche außerhalb des div mit seinem Position auf relativ gesetzt und ein linkes Gleitkomma, so dass es unmittelbar rechts vom div steht. Legen Sie als Nächstes einen negativen linken Rand und einen positiven z-Index fest, sodass er über dem div angezeigt wird.

Hier ist ein Beispiel:

#close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>

Question 4

Position:fixed gibt eine absolute Position bezüglich des BROWSER-Fensters an. da geht es natürlich hin.

Während position:absolute bezieht sich auf das übergeordnete Element, wenn Sie also Ihre platzieren <div> Schaltfläche innerhalb des <div> des Behälters sollte es dort positioniert werden, wo Sie es haben wollten. Etwas wie

BEARBEITEN: Dank @Sotiris, der einen Punkt hat, kann eine Lösung mit einer Position: fest und einem linken Rand erreicht werden. So was: http://jsfiddle.net/NeK4k/

Question 5

Ich weiß, dass dies ein alter Beitrag ist, aber ich hatte die gleiche Frage, fand aber keine Antwort, die das Element relativ zu einem übergeordneten Element festlegte div. Die Bildlaufleiste an medium.com ist eine großartige reine CSS-Lösung, um etwas einzustellen position: fixed; relativ zu einem übergeordneten Element anstelle des Ansichtsfensters (irgendwie *). Dies wird erreicht, indem das übergeordnete Element festgelegt wird div zu position: relative; und mit einer Knopfverpackung mit position: absolute; und der Knopf ist natürlich position: fixed; folgendermaßen:

<div class="wrapper">
  <div class="content">
    Your long content here
  </div>

  <div class="button-wrapper">
    <button class="button">This is your button</button>
  </div>
</div>

<style>
  .wrapper {
    position: relative;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .button {
    position: fixed;
    top: 0;
    width: 50px;
  }
</style>

Arbeitsbeispiel

*Da feste Elemente nicht mit der Seite scrollen, ist die vertikale Position bei dieser Lösung immer noch relativ zum Ansichtsfenster, aber die horizontale Position ist relativ zum übergeordneten Element.

Question 6

Anscheinend können CSS-Transformationen verwendet werden

“Die Eigenschaft ‘transform’ erstellt ein neues lokales Koordinatensystem am Element”,

aber … das ist nicht Cross-Browser, scheint nur Opera korrekt zu funktionieren

Question 7

Versuchen Position: klebrig auf dem übergeordneten div des Elements, das Sie reparieren möchten.

Mehr Infos hier: http://html5-demos.appspot.com/static/css/sticky.html.
Vorsicht: Überprüfen Sie die Kompatibilität der Browserversion.

Question 8

Ich habe es geschafft, ein Element mit einer festen Position (Wiewport) zu haben, aber relativ zur Breite seines übergeordneten Elements.

Ich musste nur mein festes Element umwickeln und dem übergeordneten Element eine Breite von 100% geben. Gleichzeitig befinden sich das umschlossene feste Element und das übergeordnete Element in einem div, dessen Breite sich je nach Seite ändert und den Inhalt der Website enthält. Mit diesem Ansatz kann ich das feste Element immer im gleichen Abstand zum Inhalt haben, je nach Breite dieses. In meinem Fall war dies eine „Nach oben“-Schaltfläche, die immer 15 Pixel von unten und 15 Pixel rechts vom Inhalt angezeigt wird.

https://codepen.io/rafaqf/pen/MNqWKB

<div class="body">
  <div class="content">
    <p>Some content...</p>
    <div class="top-wrapper">
      <a class="top">Top</a>
    </div>
  </div>
</div>

.content {
  width: 600px; /*change this width to play with the top element*/
  background-color: wheat;
  height: 9999px;
  margin: auto;
  padding: 20px;
}
.top-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 9;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: yellowgreen;
    position: fixed;
    bottom: 20px;
    margin-left: 100px;
    cursor: pointer;
    &:hover {
      opacity: .6;
    }
  }
}