Ich versuche, ein Problem zu beheben, divdamit es immer am oberen Bildschirmrand haftet.

position: fixed;
top: 0px;
right: 0px;

Das divbefindet sich jedoch in einem zentrierten Behälter. Wenn ich es benutze position:fixed, wird das divVerhältnis zum Browserfenster korrigiert, z. B. auf der rechten Seite des Browsers. Stattdessen sollte es relativ zum Container festgelegt werden.

Ich weiß, dass position:absolutedies 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?

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:

#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 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 (wie 50%) verwenden, da diese relativ zum übergeordneten Element und nicht zum Element sind, das es ist angewendet. transformverhält sich anders. Seine Werte beziehen sich auf das Element, auf das sie angewendet werden. Somit bedeutet 50%for transformdie Hälfte der Breite des Elements, während 50%for margin die Hälfte der Breite des übergeordneten Elements beträgt. Dies ist eine IE9 + -Lösung

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

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

Wenn Sie möchten, dass es zentriert wird, können Sie dies auch 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
ursprüngliche Guthaben geht an den Benutzer aaronk6 , der mich in dieser Antwort darauf hingewiesen hat

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:

/* 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 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!

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

-webkit-transform: translateZ(0);

für den Körper machte es ein festes Kind relativ zu ihm (anstelle des Ansichtsfensters). Meine festen Elemente leftund topEigenschaften 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:

Bei Elementen, deren Layout vom CSS-Box-Modell gesteuert wird, führt jeder andere Wert als keiner für die Transformation dazu, dass sowohl ein Stapelkontext als auch ein enthaltender Block erstellt werden. Das Objekt fungiert als enthaltender Block für fest positionierte Nachkommen.

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 topund leftEigenschaften nun unter Berücksichtigung der Eigenschaft mit dem Container verknüpft sind box-sizing, sich sein Bildlaufkontext über den Rand des Elements erstreckt, als ob Box -sizing wurde auf gesetzt border-box. Für einige Kreative da draußen könnte dies möglicherweise ein Spielzeug werden :)

PRÜFUNG

Die Antwort lautet ja, solange Sie nicht left: 0oder right: 0nachdem 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.

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>

position: stickyDas ist eine neue Art, Elemente zu positionieren, die konzeptionell ähnlich sind position: fixed. Der Unterschied besteht darin, dass sich ein Element mit position: stickywie position: relativein 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 .

2019 LÖSUNG: Sie können position: stickyEigentum 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:

1. Ein Element mit einer klebrigen Position wird basierend auf der Bildlaufposition des Benutzers positioniert. Es verhält sich im Grunde so, position: relativebis 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.

2. Es beeinflusst den Fluss anderer Elemente auf der Seite, dh es belegt einen bestimmten Platz auf der Seite (genau wie position: relative).

3. 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.

Nehmen Sie einfach die oberen und linken Stile aus der festen Position div. Hier ist ein Beispiel

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

Das #content div wird überall dort sitzen, wo das übergeordnete div sitzt, wird dort jedoch festgelegt.

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:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

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!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

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 fixedElement (nicht top, right, bottom, oder leftWerte).

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:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Dann verwenden margin-topund margin-left"verschieben" wir sie in Bezug auf ihren Container, so wie es dieses CSS tut:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Da fixedElemente alle anderen Layoutelemente ignorieren, kann der letzte Container in unserer Geige mehrere fixedElemente 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.

Sie können mein jQuery-Plugin FixTo ausprobieren .

Verwendungszweck:

$('#mydiv').fixTo('#centeredContainer');

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.

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:relativefü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

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

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 !!!

<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 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.

Ich habe eine jsfiddle erstellt, um zu demonstrieren, wie dies mit transform funktioniert.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

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.

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

CSS

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

.fix {
  prosition:absolute;
}

/* 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%);
}

Ja, es ist möglich, solange Sie die Position ( topoder leftusw.) Ihres fixedElements nicht festlegen (Sie können jedoch weiterhin margineine 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 .

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:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

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.

Es ist möglich, wenn Sie JavaScript verwenden. In diesem Fall das jQuery Plugin Sticky-Kit :

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:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Ist das die Konvention oder habe ich das zu stark vereinfacht?

Wenn Sie position:fixedCSS - Regel und versuchen anzuwenden top/ left/ right/ bottomsie das Element relativ zum Fenster positioniert.

Eine Problemumgehung besteht darin, marginEigenschaften anstelle von top/ left/ right/ zu verwendenbottom

Überprüfen Sie dies:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>