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

Kurze Antwort: Nein. (Dies ist jetzt mit CSS-Transformation möglich, siehe untenstehende Bearbeitung)

Lange Antwort: Das Problem bei der Verwendung einer "festen" Positionierung ist, dass sie das Element aus dem Fluss . daher kann er nicht relativ zu seinem Elternteil verschoben werden, da es so ist, als hätte er keinen Elternteil. Wenn jedoch der Container eine feste, bekannte Breite hat, können Sie etwas wie verwenden:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Bearbeiten (03/2015):

Dies ist eine veraltete Information. Es ist jetzt möglich, Inhalte einer dynamischen Größe (horizontal und vertikal) mit Hilfe der Magie von CSS3 transform zu zentrieren. Das gleiche Prinzip gilt, aber anstatt margin zu verwenden, um Ihren Container auszugleichen, können Sie verwenden translateX(-50%) . Das funktioniert nicht mit dem obigen Trick mit den Rändern, weil man nicht weiß, um wie viel man sie versetzen muss, es sei denn, die Breite ist fest und man kann keine relativen Werte verwenden (wie 50% ), da sie sich auf das übergeordnete Element bezieht und nicht auf das Element, auf das sie angewendet wird. transform verhält sich anders. Ihre Werte sind relativ zu dem Element, auf das sie angewendet werden. Also, 50% para transform bedeutet die Hälfte der Breite des Elements, während 50% für Rand ist die Hälfte der Breite des übergeordneten Elements. Dies ist ein IE9+ Lösung

Mit ähnlichem Code wie im obigen Beispiel habe ich dasselbe Szenario mit vollständig dynamischer Breite und Höhe nachgestellt:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Wenn Sie es zentriert haben wollen, können Sie auch das tun:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Nur horizontal zentriert
jsFiddle: Sowohl horizontal als auch vertikal zentriert
Das Original geht an den Benutzer aaronk6 dass Sie mich darauf hingewiesen haben in diese Antwort

Answer 2

Dies ist tatsächlich möglich, und die akzeptierte Antwort bezieht sich nur auf die Zentralisierung, die einfach genug ist. Außerdem brauchen Sie JavaScript nicht wirklich zu verwenden.

So können Sie mit jedem Szenario umgehen:

Richten Sie alles so ein, wie Sie es tun würden, wenn Sie "position: absolute" innerhalb eines "position: relative"-Containers verwenden würden, und erstellen Sie dann ein neues Div mit fester Position innerhalb des Divs mit position: absolute aber tun no legen Sie die Eigenschaften oben und links fest. Es wird dann an der gewünschten Stelle relativ zum Container fixiert.

Zum Beispiel:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Leider hatte ich gehofft, dass dieser Thread mein Problem mit dem Android-System lösen könnte. WebKit Rendering box-shadow blur Pixel als Ränder auf feste Position Elemente, aber es scheint, es ist ein Fehler.
Wie auch immer, ich hoffe, das hilft!

Answer 3

Ja, den Angaben zufolge gibt es eine Möglichkeit.

Ich stimme zwar zu, dass die Antwort von Graeme Blackwood akzeptiert werden sollte, weil sie das Problem praktisch löst, aber es sollte beachtet werden, dass ein festes Element kann relativ zu seinem Behälter positioniert werden.

Ich habe zufällig festgestellt, dass bei der Anwendung

-webkit-transform: translateZ(0);

mit dem Körper verbunden ist, wird ein festes Kind relativ zum Körper (und nicht zum Ansichtsfenster) erstellt. Also meine festen Elemente left y top Eigenschaften waren nun relativ zum Container.

Also habe ich ein wenig recherchiert und herausgefunden, dass das Thema bereits von Eric Meyer und auch wenn es sich wie ein "Trick" anfühlte, stellte sich heraus, dass dies Teil der Spezifikationen ist:

Für Elemente, deren Layout durch das CSS-Box-Modell bestimmt wird, ist jeder Wert als "none" für die Transformation zur Erstellung sowohl eines Stapelkontext und einen enthaltenden Block. Das Objekt fungiert als enthaltender Block für fest positionierte Nachkommen.

http://www.w3.org/TR/css3-transforms/

Wenn Sie also eine beliebige Transformation auf ein übergeordnetes Element anwenden, wird dieses zum enthaltenden Block.

Aber...

Das Problem ist, dass die Implementierung fehlerhaft/kreativ zu sein scheint, da sich die Elemente auch nicht mehr wie festgelegt verhalten (auch wenn dieser Teil nicht Teil der Spezifikation zu sein scheint).

Das gleiche Verhalten ist in Safari, Chrome und Firefox zu beobachten, nicht aber im IE11 (wo das fixierte Element weiterhin fixiert bleibt).

Eine weitere interessante (undokumentierte) Sache ist, dass, wenn ein festes Element innerhalb eines transformierten Elements enthalten ist, während sein top y left Eigenschaften werden nun auf den Container bezogen, unter Berücksichtigung der box-sizing ist, erstreckt sich der Bildlaufkontext über den Rand des Elements, als ob box-sizing auf border-box . Für einige Kreative da draußen, könnte dies möglicherweise ein Spielzeug werden :)

TEST

Answer 4

Die Antwort lautet: Ja, solange Sie nicht die left: 0 o right: 0 nachdem Sie die div-Position auf fest eingestellt haben.

http://jsfiddle.net/T2PL5/85/

Prüfen Sie das Seitenleisten-Div. Es ist fest, aber bezogen auf die übergeordnete, nicht auf das Fenster Ansicht Punkt.

body {
  background: #ccc;
}

.wrapper {
  margin: 0 auto;
  height: 1400px;
  width: 650px;
  background: green;
}

.sidebar {
  background-color: #ddd;
  float: left;
  width: 300px;
  height: 100px;
  position: fixed;
}

.main {
  float: right;
  background-color: yellow;
  width: 300px;
  height: 1400px;
}

<div class="wrapper">wrapper
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
</div>

Answer 5

position: sticky das ist eine neue Möglichkeit, Elemente zu positionieren, die konzeptionell ähnlich ist wie position: fixed . Der Unterschied besteht darin, dass ein Element mit position: sticky verhält sich wie position: relative innerhalb des übergeordneten Objekts, bis ein bestimmter Schwellenwert für den Versatz im Ansichtsfenster erreicht ist.

In Chrome 56 (derzeit Beta ab Dezember 2016, stabil ab Januar 2017) ist position: sticky jetzt wieder da.

https://developers.google.com/web/updates/2016/12/position-sticky

Weitere Einzelheiten finden Sie unter Klebe deine Landungen! Position: klebrige Landungen in WebKit .