Ich versuche, ein Problem zu beheben, div
damit es immer am oberen Bildschirmrand haftet.
position: fixed;
top: 0px;
right: 0px;
Das div
befindet sich jedoch in einem zentrierten Behälter. Wenn ich es benutze position:fixed
, wird das div
Verhältnis zum Browserfenster korrigiert, z. B. auf der rechten Seite des Browsers. Stattdessen sollte es relativ zum Container festgelegt werden.
Ich weiß, dass position:absolute
dies verwendet werden kann, um ein Element relativ zu dem zu fixieren div
, aber wenn Sie die Seite nach unten scrollen, verschwindet das Element und bleibt nicht wie bei oben position:fixed
.
Gibt es einen Hack oder eine Problemumgehung, um dies zu erreichen?
css
position
css-position
fixed
Zach Nicodemous
quelle
quelle
Antworten:
Kurze Antwort:
nein.(Es ist jetzt mit CSS-Transformation möglich. Siehe die Bearbeitung unten)Lange Antwort: Das Problem bei der Verwendung der "festen" Positionierung besteht darin, dass das Element aus dem Fluss genommen wird . Daher kann es nicht relativ zu seinem übergeordneten Element neu positioniert werden, da es so ist, als hätte es keines. Wenn der Container jedoch eine feste, bekannte Breite hat, können Sie Folgendes verwenden:
http://jsfiddle.net/HFjU6/1/
Bearbeiten (03/2015):
Dies sind veraltete Informationen. Mit Hilfe der Magie der CSS3-Transformation ist es jetzt möglich, Inhalte einer dynamischen Größe (horizontal und vertikal) zu zentrieren. Das gleiche Prinzip gilt, aber anstatt den Rand zum Versetzen Ihres Containers zu verwenden, können Sie ihn verwenden
translateX(-50%)
. Dies funktioniert mit dem obigen Randtrick nicht, da Sie nicht wissen, wie viel er versetzt werden soll, es sei denn, die Breite ist fest und Sie können keine relativen Werte (wie50%
) verwenden, da diese relativ zum übergeordneten Element und nicht zum Element sind, das es ist angewendet.transform
verhält sich anders. Seine Werte beziehen sich auf das Element, auf das sie angewendet werden. Somit bedeutet50%
fortransform
die Hälfte der Breite des Elements, während50%
for margin die Hälfte der Breite des übergeordneten Elements beträgt. Dies ist eine IE9 + -LösungMit ähnlichem Code wie im obigen Beispiel habe ich dasselbe Szenario mit vollständig dynamischer Breite und Höhe neu erstellt:
Wenn Sie möchten, dass es zentriert wird, können Sie dies auch tun:
Demos:
jsFiddle: Nur horizontal
zentriert jsFiddle: Sowohl horizontal als auch vertikal zentriert Das
ursprüngliche Guthaben geht an den Benutzer aaronk6 , der mich in dieser Antwort darauf hingewiesen hat
quelle
position:fixed
ohne Angabetop
oderleft
manchmal funktioniert? Einige Browser scheinen das Element standardmäßig auf den normalen Stand zu bringen, wenn es normal positioniert wäre. stackoverflow.com/questions/8712047/…left:inherit
zum Element mit fester Position den Browser dazu zwingen kann, den Versatz des übergeordneten Elements zu berücksichtigen.Tatsächlich ist dies möglich und die akzeptierte Antwort befasst sich nur mit der Zentralisierung, was recht einfach ist. Außerdem müssen Sie wirklich kein JavaScript verwenden.
Auf diese Weise können Sie mit jedem Szenario umgehen:
Richten Sie alles so ein, wie Sie es möchten, wenn Sie positionieren möchten: absolut innerhalb eines position: relativen Containers, und erstellen Sie dann eine neue feste Position div innerhalb der div mit
position: absolute
, aber legen Sie nicht die oberen und linken Eigenschaften fest. Es wird dann relativ zum Container fixiert, wo immer Sie es möchten.Zum Beispiel:
Leider hatte ich gehofft, dass dieser Thread mein Problem mit dem WebKit von Android lösen könnte, das Box-Shadow-Unschärfe-Pixel als Ränder für Elemente mit fester Position darstellt, aber es scheint ein Fehler zu sein.
Wie auch immer, ich hoffe das hilft!
quelle
Ja, gemäß den Spezifikationen gibt es einen Weg.
Ich stimme zwar zu, dass Graeme Blackwoods die akzeptierte Antwort sein sollte, da es das Problem praktisch löst, es sollte jedoch beachtet werden, dass ein festes Element relativ zu seinem Behälter positioniert werden kann .
Ich habe das zufällig bei der Bewerbung bemerkt
für den Körper machte es ein festes Kind relativ zu ihm (anstelle des Ansichtsfensters). Meine festen Elemente
left
undtop
Eigenschaften waren nun relativ zum Container.Also habe ich einige Nachforschungen angestellt und festgestellt, dass das Problem bereits von Eric Meyer behandelt wurde, und selbst wenn es sich wie ein "Trick" anfühlte, stellte sich heraus, dass dies Teil der Spezifikationen ist:
http://www.w3.org/TR/css3-transforms/
Wenn Sie also eine Transformation auf ein übergeordnetes Element anwenden, wird es zum enthaltenden Block.
Aber...
Das Problem ist, dass die Implementierung fehlerhaft / kreativ erscheint, da sich die Elemente auch nicht mehr wie fest verhalten (auch wenn dieses Bit nicht Teil der Spezifikation zu sein scheint).
Das gleiche Verhalten tritt in Safari, Chrome und Firefox auf, jedoch nicht in IE11 (wo das feste Element weiterhin fest bleibt).
Eine andere interessante (undokumentierte) Sache ist, dass, wenn ein festes Element in einem transformierten Element enthalten ist, während seine
top
undleft
Eigenschaften nun unter Berücksichtigung der Eigenschaft mit dem Container verknüpft sindbox-sizing
, sich sein Bildlaufkontext über den Rand des Elements erstreckt, als ob Box -sizing wurde auf gesetztborder-box
. Für einige Kreative da draußen könnte dies möglicherweise ein Spielzeug werden :)PRÜFUNG
quelle
left:
(wenn man bedenkt, dass es durcheinander kommt)Die Antwort lautet ja, solange Sie nicht
left: 0
oderright: 0
nachdem Sie die div-Position auf fest gesetzt haben.http://jsfiddle.net/T2PL5/85/
Kasse der Seitenleiste div. Es ist fest, bezieht sich jedoch auf das übergeordnete Element und nicht auf den Fensteransichtspunkt.
quelle
position: sticky
Das ist eine neue Art, Elemente zu positionieren, die konzeptionell ähnlich sindposition: fixed
. Der Unterschied besteht darin, dass sich ein Element mitposition: sticky
wieposition: relative
in seinem übergeordneten Element verhält , bis ein bestimmter Versatzschwellenwert im Ansichtsfenster erreicht wird.In Chrome 56 (derzeit Beta ab Dezember 2016, stabil im Januar 2017) Position: Sticky ist jetzt zurück.
https://developers.google.com/web/updates/2016/12/position-sticky
Weitere Details finden Sie unter Stick your landings! Position: klebrige Länder in WebKit .
quelle
position:sticky
ist toll. Unterstützt von allen Browsern außer IE caniuse.com/#feat=css-sticky2019 LÖSUNG: Sie können
position: sticky
Eigentum verwenden.Hier ist ein Beispiel für CODEPEN , das die Verwendung und deren Unterschiede demonstriert
position: fixed
.Wie es sich verhält, wird unten erklärt:
Ein Element mit einer klebrigen Position wird basierend auf der Bildlaufposition des Benutzers positioniert. Es verhält sich im Grunde so,
position: relative
bis ein Element über einen bestimmten Versatz hinaus gescrollt wird. In diesem Fall wird es in die Position: fest. Wenn es zurückgescrollt wird, kehrt es zu seiner vorherigen (relativen) Position zurück.Es beeinflusst den Fluss anderer Elemente auf der Seite, dh es belegt einen bestimmten Platz auf der Seite (genau wie
position: relative
).Wenn es in einem Container definiert ist, wird es in Bezug auf diesen Container positioniert. Wenn der Container einen Überlauf hat (Bildlauf), wird er abhängig vom Bildlaufversatz in Position: fest.
Wenn Sie also die festgelegte Funktionalität erreichen möchten, sich jedoch in einem Container befinden, verwenden Sie Sticky.
quelle
position: sticky
nicht. Hat mir sehr geholfen, danke!Nehmen Sie einfach die oberen und linken Stile aus der festen Position div. Hier ist ein Beispiel
Das #content div wird überall dort sitzen, wo das übergeordnete div sitzt, wird dort jedoch festgelegt.
quelle
Ich habe dieses jQuery-Plugin erstellt, um ein ähnliches Problem zu lösen, bei dem ich einen zentrierten Container (Tabellendaten) hatte, und ich wollte, dass der Header beim Scrollen der Liste am oberen Rand der Seite fixiert wird, aber ich wollte, dass er verankert wird die tabellarischen Daten so, dass sie sich überall dort befinden, wo ich den Container platziere (zentriert, links, rechts) und ihn beim horizontalen Scrollen mit der Seite nach links und rechts bewegen kann.
Hier ist der Link zu diesem jQuery-Plugin, der 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 der Ansicht gescrollt worden wäre. Das Element kann sich jedoch mit dem horizontalen Bildlauf weiter nach links oder rechts bewegen.
Bei einer Option marginTop bewegt sich das Element nicht mehr vertikal nach oben, 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 nach unten gescrollt wurde und die Zielposition überschritten wurde, wird das Element an seiner ursprünglichen Position auf der Seite wiederhergestellt.
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:
quelle
Ich musste dies mit einer Werbung tun, die mein Kunde außerhalb des Inhaltsbereichs platzieren wollte. Ich habe einfach folgendes gemacht und es hat wie ein Zauber funktioniert!
quelle
Zwei HTML-Elemente und reines CSS (moderne Browser)
Siehe dieses jsFiddle-Beispiel. Ändern Sie die Größe und sehen Sie, wie sich die festen Elemente sogar mit den schwebenden Elementen bewegen, in denen sie sich befinden. Verwenden Sie die innerste Bildlaufleiste, um zu sehen, wie der Bildlauf auf einer Site funktionieren würde (feste Elemente bleiben fest).
Wie hier schon viele gesagt haben, ist ein Schlüssel keine Positionseinstellungen auf dem nicht einstellen
fixed
Element (nichttop
,right
,bottom
, oderleft
Werte).Vielmehr setzen wir alle festen Elemente (beachten Sie, wie die letzte Box vier davon hat) zuerst in die Box, von der sie positioniert werden sollen, wie folgt:
Dann verwenden
margin-top
undmargin-left
"verschieben" wir sie in Bezug auf ihren Container, so wie es dieses CSS tut:Da
fixed
Elemente alle anderen Layoutelemente ignorieren, kann der letzte Container in unserer Geige mehrerefixed
Elemente enthalten und dennoch alle Elemente, die sich auf die obere linke Ecke beziehen. Dies gilt jedoch nur, wenn sie alle zuerst im Container platziert werden, da diese Vergleichsgeige zeigt, dass die Positionierung unzuverlässig wird, wenn sie im Containerinhalt verteilt wird .Es spielt keine Rolle, ob der Wrapper statisch , relativ oder absolut positioniert ist.
quelle
Sie können mein jQuery-Plugin FixTo ausprobieren .
Verwendungszweck:
quelle
Eine andere seltsame Lösung, um eine relative feste Position zu erreichen, besteht darin, Ihren Container in einen Iframe umzuwandeln. Auf diese Weise kann Ihr festes Element im Ansichtsfenster des Containers und nicht auf der gesamten Seite fixiert werden.
quelle
Mit reinem CSS können Sie das nicht schaffen. Zumindest habe ich nicht. Sie können dies jedoch sehr einfach mit jQuery tun. Ich werde mein Problem erklären und mit einer kleinen Änderung können Sie es verwenden.
Zunächst wollte ich, dass mein Element einen festen oberen Rand (vom oberen Rand des Fensters) und eine linke Komponente hat, die vom übergeordneten Element geerbt werden soll (da das übergeordnete Element zentriert ist). Um die linke Komponente festzulegen, fügen Sie einfach Ihr Element in das übergeordnete Element ein und legen Sie es
position:relative
für das übergeordnete Element fest.Dann müssen Sie wissen, wie weit Ihr Element von oben entfernt ist, wenn sich eine Bildlaufleiste oben befindet (y Null gescrollt). Es gibt wieder zwei Möglichkeiten. Erstens ist das statisch (eine Zahl) oder Sie müssen es aus dem übergeordneten Element lesen.
In meinem Fall sind es 150 Pixel von oben statisch. Wenn Sie also 150 sehen, ist es, wie viel das Element von oben ist, wenn wir nicht gescrollt haben.
CSS
jQuery
quelle
Dies ist einfach (gemäß HTML unten)
Der Trick besteht darin, NICHT oben oder links auf dem Element (div) mit "position: fixed;" zu verwenden. Wenn diese nicht angegeben sind, erscheint das Element "fester Inhalt" RELATIV zum umschließenden Element (das div mit "position: relative;") STATT relativ zum Browserfenster !!!
Oben konnte ich eine schließende "X" -Schaltfläche am oberen Rand einer Menge Text in einem Div mit vertikalem Bildlauf finden. Das "X" sitzt an Ort und Stelle (bewegt sich nicht mit gescrolltem Text und bewegt sich dennoch mit dem umschließenden div-Container nach links oder rechts, wenn der Benutzer die Breite des Browserfensters ändert! Somit ist es vertikal "fixiert", aber relativ zu positioniert das umschließende Element horizontal!
Bevor ich das zum Laufen brachte, rollte das "X" nach oben und außer Sicht, als ich den Textinhalt nach unten scrollte.
Entschuldigung, dass ich meine Javascript-Funktion hideDiv () nicht bereitgestellt habe, aber dies würde diesen Beitrag unnötig verlängern. Ich habe mich dafür entschieden, es so kurz wie möglich zu halten.
quelle
Ich habe eine jsfiddle erstellt, um zu demonstrieren, wie dies mit transform funktioniert.
HTML
CSS
jQuery
https://jsfiddle.net/bx6ktwnn/1/
quelle
Ich habe das gleiche Problem, eines unserer Teammitglieder gibt mir eine Lösung. Um die Div-Fix-Position und relativ zu anderen Div zuzulassen, besteht unsere Lösung darin, einen Vater-Container zu verwenden, der das Fix-Div umschließt und Div rollt.
CSS
quelle
quelle
Ja, es ist möglich, solange Sie die Position (
top
oderleft
usw.) Ihresfixed
Elements nicht festlegen (Sie können jedoch weiterhinmargin
eine relative Position festlegen). Simon Bos einiger Zeit darüber geschrieben .Erwarten Sie jedoch nicht, dass ein festes Element mit nicht festen Verwandten scrollt.
Sehen Sie hier eine Demo .
quelle
Ich habe so etwas vor einiger Zeit gemacht. Ich war ziemlich neu in JavaScript, daher bin ich sicher, dass Sie es besser machen können, aber hier ist ein Ausgangspunkt:
Sie müssen Ihre Breite einstellen. Anschließend wird die Fensterbreite ermittelt und der Rand alle paar Sekunden geändert. Ich weiß, dass es schwer ist, aber es funktioniert.
quelle
Es ist möglich, wenn Sie JavaScript verwenden. In diesem Fall das jQuery Plugin Sticky-Kit :
quelle
Mein Projekt ist die .NET ASP Core 2 MVC Angular 4-Vorlage mit Bootstrap 4. Das Hinzufügen von "Sticky-Top" zur Haupt-App-Komponente html (dh app.component.html) in der ersten Zeile hat wie folgt funktioniert:
Ist das die Konvention oder habe ich das zu stark vereinfacht?
quelle
Wenn Sie
position:fixed
CSS - Regel und versuchen anzuwendentop
/left
/right
/bottom
sie das Element relativ zum Fenster positioniert.Eine Problemumgehung besteht darin,
margin
Eigenschaften anstelle vontop
/left
/right
/ zu verwendenbottom
quelle
Überprüfen Sie dies:
quelle