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

Ich weiß, dies ist super alt, aber nach nicht finden die (reine CSS) Antwort, die ich suchte, kam ich mit dieser Lösung (teilweise abstrahiert von medium.com ) und dachte, es könnte anderen helfen, die dasselbe tun wollen.

Wenn Sie die Antworten von @DuckMaestro kombinieren, können Sie ein Element relativ zu einem Elternteil (eigentlich Großelternteil) fest positionieren. Verwenden Sie position: absolute; um ein Element innerhalb eines übergeordneten Elements zu positionieren mit position: relative; und dann position: fixed; auf ein Element innerhalb des absolut positionierten Elements wie folgt:

HTML

<div class="relative">
  <div class="absolute">
    <a class="fixed-feedback">This element will be fixed</a>
  </div>
</div>

CSS

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

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

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

BEISPIEL

Wie @JonAdams sagte, ist die Definition von position: fixed erfordert, dass das Element relativ zum Ansichtsfenster positioniert wird, aber Sie können den horizontalen Aspekt mit dieser Lösung umgehen.

Hinweis: Dies ist etwas anderes als das einfache Setzen eines right o left Wert für das fixierte Element, da es sich sonst bei einer Größenänderung des Fensters horizontal verschieben würde.

Answer 2

Hier ist ein Beispiel für Jon Adams obigen Vorschlag, um ein div (Symbolleiste) auf der rechten Seite Ihrer Seite Element mit jQuery zu befestigen. Die Idee ist, den Abstand von der rechten Seite des Viewports zur rechten Seite des Seitenelements zu finden und die rechte Seite der Symbolleiste dort zu halten!

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
    $(toolbar).css("right", $(window).scrollLeft() + $(window).width()
    - $(pageElement).offset().left
    - parseInt($(pageElement).css("borderLeftWidth"),10)
    - $(pageElement).width() + "px");
}
$(document).ready(function() {
    $(window).resize(function() {
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $(window).scroll(function () { 
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $("#toolbar").resize();
});

Answer 3

Es ist ein alter Beitrag, aber ich lasse hier meine Javascript-Lösung, nur für den Fall, dass jemand es braucht.

---

// you only need this function
function sticky( _el ){
  _el.parentElement.addEventListener("scroll", function(){
    _el.style.transform = "translateY("+this.scrollTop+"px)";
  });
}

// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);

#blbl{
  position:relative;
  height:200px;  
  overflow: auto;
  background: #eee;
}

#blbl > div{
  position:absolute; 
  padding:50px; 
  top:10px; 
  left:10px; 
  background: #f00
}

<div id="blbl" >
    <div><!-- sticky div --></div> 

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

---

Anmerkungen

1. Ich habe transform: translateY(@px) weil sie leicht zu berechnen sein sollte, Hochleistungs-Animationen

2. Ich habe diese Funktion nur mit modernen Browsern ausprobiert, sie funktioniert nicht mit alten Browsern, für die Hersteller erforderlich sind (und natürlich mit dem IE)

Answer 4

Ich weiß, dass dies ein älterer Beitrag ist, aber ich denke, ein gutes Beispiel für das, was Jiew Meng zu tun versuchte, ist bereits auf dieser Website zu finden. Sehen Sie sich das Seitenmenü an, das sich hier befindet: https://stackoverflow.com/faq#questions . Wenn ich es mir ansehe, ohne zu tief in die Materie einzusteigen, kann ich sagen, dass Javascript eine feste Position festlegt, sobald der Bildlauf unterhalb des Anker-Tags erfolgt, und die feste Positionierung entfernt, wenn der Bildlauf über das gleiche Anker-Tag hinausgeht. Hoffentlich bringt das jemanden in die richtige Richtung.

Answer 5

Mit mehreren Divs gelang es mir, ein fixed-y und absolute-x Divs zu erhalten. In meinem Fall brauchte ich ein div auf linken und rechten Seiten, ausgerichtet auf eine zentrierte 1180px Breite div.

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>