Sto cercando di risolvere un problema in divmodo che si attacchi sempre alla parte superiore dello schermo, utilizzando:

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

Tuttavia, divè all'interno di un contenitore centrato. Quando lo uso position:fixed, risolve il problema divrelativo alla finestra del browser, ad esempio sul lato destro del browser. Invece, dovrebbe essere riparato rispetto al contenitore.

So che position:absolutepuò essere usato per correggere un elemento relativo a div, ma quando scorri verso il basso la pagina svanisce e non si attacca all'inizio come con position:fixed.

C'è un trucco o una soluzione alternativa per raggiungere questo obiettivo?

Risposta breve: no. (Ora è possibile con la trasformazione CSS. Vedi la modifica di seguito)

Risposta lunga: il problema con l'utilizzo del posizionamento "fisso" è che elimina l'elemento dal flusso . quindi non può essere riposizionato rispetto al suo genitore perché è come se non ne avesse uno. Se, tuttavia, il contenitore ha una larghezza fissa e nota, è possibile utilizzare qualcosa del tipo:

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

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

Modifica (03/2015):

Si tratta di informazioni obsolete. Ora è possibile centrare il contenuto di una dimensione dinamica (orizzontale e verticale) con l'aiuto della magia della trasformazione CSS3. Si applica lo stesso principio, ma invece di utilizzare il margine per compensare il contenitore, è possibile utilizzare translateX(-50%). Questo non funziona con il trucco del margine sopra perché non sai quanto compensarlo a meno che la larghezza non sia fissa e non puoi usare valori relativi (come 50%) perché sarà relativo al genitore e non all'elemento è applicata ai. transformsi comporta diversamente. I suoi valori sono relativi all'elemento a cui sono applicati. Pertanto, 50%per transformsignifica metà della larghezza dell'elemento, mentre 50%per margine è la metà della larghezza del genitore. Questa è una soluzione IE9 +

Utilizzando un codice simile all'esempio precedente, ho ricreato lo stesso scenario usando larghezza e altezza completamente dinamiche:

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

Se vuoi che sia centrato, puoi farlo anche tu:

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

Demos:

jsFiddle: centrato solo in orizzontale
jsFiddle: centrato sia in orizzontale che in verticale Il
credito originale va all'utente aaronk6 per avermelo segnalato in questa risposta

In realtà questo è possibile e la risposta accettata riguarda solo la centralizzazione, che è abbastanza semplice. Inoltre, non è necessario utilizzare JavaScript.

Questo ti permetterà di affrontare qualsiasi scenario:

Imposta tutto come vorresti se vuoi posizionare: assoluto all'interno di una posizione: relativo contenitore, quindi crea un nuovo div di posizione fissa all'interno del div con position: absolute, ma non imposta le sue proprietà superiore e sinistra. Verrà quindi risolto dove lo desideri, in relazione al contenitore.

Per esempio:

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

Purtroppo, speravo che questo thread potesse risolvere il mio problema con il rendering di WebKit di Android pixel di sfocatura dell'ombra della scatola come margini sugli elementi di posizione fissi, ma sembra che sia un bug.
Comunque, spero che questo aiuti!

Sì, secondo le specifiche, c'è un modo.

Anche se concordo sul fatto che Graeme Blackwood dovrebbe essere la risposta accettata, poiché praticamente risolve il problema, va notato che un elemento fisso può essere posizionato relativamente al suo contenitore.

Ho notato per caso che durante l'applicazione

-webkit-transform: translateZ(0);

al corpo, ha fatto un bambino fisso rispetto ad esso (invece della finestra). Quindi i miei elementi fissi lefte topproprietà erano ora relativi al contenitore.

Quindi ho fatto alcune ricerche e ho scoperto che il problema era già stato trattato da Eric Meyer e anche se sembrava un "trucco", risulta che questo fa parte delle specifiche:

Per gli elementi il ​​cui layout è regolato dal modello di riquadro CSS, qualsiasi valore diverso da nessuno per la trasformazione risulta nella creazione di un contesto di impilamento e di un blocco contenitore. L'oggetto funge da blocco contenitore per i discendenti posizionati fissi.

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

Pertanto, se si applica una trasformazione a un elemento padre, diventerà il blocco contenitore.

Ma...

Il problema è che l'implementazione sembra buggy / creativa, perché anche gli elementi smettono di comportarsi come fissi (anche se questo bit non sembra far parte delle specifiche).

Lo stesso comportamento si troverà in Safari, Chrome e Firefox, ma non in IE11 (dove l'elemento fisso rimarrà comunque fisso).

Un'altra cosa interessante (non documentata) è che quando un elemento fisso è contenuto all'interno di un elemento trasformato, mentre le sue proprietà tope leftsaranno ora correlate al contenitore, rispettando la box-sizingproprietà, il suo contesto di scorrimento si estenderà sul bordo dell'elemento, come se la casella -sizing era impostato su border-box. Per alcuni creativi là fuori, questo potrebbe diventare un giocattolo :)

TEST

La risposta è sì, purché non sia impostata left: 0o right: 0dopo aver impostato la posizione div su fisso.

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

Verifica il div della barra laterale. È fisso, ma correlato al genitore, non al punto di vista della finestra.

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: stickyquesto è un nuovo modo di posizionare elementi concettualmente simili position: fixed. La differenza è che un elemento con position: stickysi comporta come position: relativeall'interno del suo genitore, fino a quando una determinata soglia di offset non viene raggiunta nella finestra.

In Chrome 56 (attualmente beta a dicembre 2016, stabile a gennaio 2017) posizione: sticky è tornato.

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

Maggiori dettagli sono in Stick your landing! posizione: terre appiccicose in WebKit .

SOLUZIONE 2019: è possibile utilizzare la position: stickyproprietà.

Ecco un esempio di CODEPEN che dimostra l'uso e anche il modo in cui differisce position: fixed.

Di seguito viene spiegato come si comporta:

1. Un elemento con posizione adesiva viene posizionato in base alla posizione di scorrimento dell'utente. Fondamentalmente si comporta come position: relativefino a quando un elemento viene fatto scorrere oltre un offset specifico, nel qual caso si trasforma in posizione: fisso. Quando viene fatto scorrere indietro, torna alla posizione precedente (relativa).

2. Influisce sul flusso di altri elementi nella pagina, ad esempio occupa uno spazio specifico sulla pagina (proprio come position: relative).

3. Se è definito all'interno di un contenitore, viene posizionato rispetto a quel contenitore. Se il contenitore presenta un overflow (scorrimento), a seconda dell'offset di scorrimento, diventa in posizione: fisso.

Quindi, se si desidera ottenere la funzionalità fissa ma all'interno di un contenitore, utilizzare sticky.

Basta prendere gli stili superiore e sinistro dalla div posizione fissa. Ecco un esempio

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

Il div #content sarà seduto dovunque si trovi il div genitore, ma sarà riparato lì.

Ho creato questo plugin jQuery per risolvere un problema simile che avevo in cui avevo un contenitore centrato (dati tabulari) e volevo che l'intestazione si aggiustasse nella parte superiore della pagina quando l'elenco veniva fatto scorrere, ma volevo che fosse ancorato a i dati tabulari in modo che siano ovunque io metta il contenitore (centrato, sinistra, destra) e consenta anche che si sposti a destra e sinistra con la pagina quando si fa scorrere in orizzontale.

Ecco il link a questo plugin jQuery che potrebbe risolvere questo problema:

https://github.com/bigspotteddog/ScrollToFixed

La descrizione di questo plugin è la seguente:

Questo plug-in viene utilizzato per fissare gli elementi nella parte superiore della pagina, se l'elemento non fosse stato visualizzato, verticalmente; tuttavia, consente all'elemento di continuare a spostarsi a sinistra o a destra con lo scorrimento orizzontale.

Data un'opzione marginTop, l'elemento smetterà di muoversi verticalmente verso l'alto una volta che lo scorrimento verticale ha raggiunto la posizione target; ma l'elemento si sposterà comunque in senso orizzontale mentre la pagina scorre verso sinistra o destra. Una volta che la pagina è stata fatta scorrere indietro verso il basso oltrepassata la posizione di destinazione, l'elemento verrà ripristinato nella sua posizione originale sulla pagina.

Questo plugin è stato testato in Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Utilizzo per il tuo caso particolare:

<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();
});

Ho dovuto farlo con una pubblicità che il mio cliente voleva sedersi al di fuori dell'area dei contenuti. Ho semplicemente fatto quanto segue e ha funzionato come un fascino!

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

Due elementi HTML e CSS puro (browser moderni)

Vedi questo esempio di jsFiddle.Ridimensiona e vedi come gli elementi fissi si muovono anche con gli elementi fluttuanti in cui si trovano. Usa la barra di scorrimento più interna per vedere come funzionerebbe lo scorrimento su un sito (gli elementi fissi rimangono fissi).

Come molti qui hanno dichiarato, una chiave non è la creazione di alcuna impostazione di posizione sul fixedelemento (no top, right, bottom, oleft valori).

Piuttosto, inseriamo tutti gli elementi fissi (notare come l'ultimo riquadro ne ha quattro) per primi nel riquadro da cui devono essere posizionati, in questo modo:

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

Quindi li usiamo margin-tope margin-leftper "spostarli" in relazione al loro contenitore, qualcosa di simile a questo CSS:

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

Si noti che poiché gli fixedelementi ignorano tutti gli altri elementi del layout, il contenitore finale nel nostro violino può avere più fixedelementi e avere comunque tutti quegli elementi relativi all'angolo in alto a sinistra. Ma questo è vero solo se sono tutti posizionati per primi nel contenitore, poiché questo violino di confronto mostra che se disperso nel contenuto del contenitore, il posizionamento diventa inaffidabile .

Se il wrapper è statico , relativo o assoluto nel posizionamento, non importa.

Puoi provare il mio plugin jQuery, FixTo .

Uso:

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

Un'altra strana soluzione per ottenere una posizione fissa relativa è convertire il contenitore in un iframe, in questo modo il tuo elemento fisso può essere fissato al suo viewport del contenitore e non all'intera pagina.

Con CSS puro non puoi farcela; almeno non l'ho fatto. Tuttavia, puoi farlo con jQuery molto semplicemente. Spiegherò il mio problema e con un piccolo cambiamento puoi usarlo.

Quindi, per cominciare, volevo che il mio elemento avesse una parte superiore fissa (dalla parte superiore della finestra) e un componente sinistro da ereditare dall'elemento padre (perché l'elemento padre è centrato). Per impostare il componente sinistro, basta inserire l'elemento nel genitore e impostareposition:relative per l'elemento genitore.

Quindi devi sapere quanto è in alto il tuo elemento quando la barra di scorrimento è in alto (y scorrimento zero); ci sono di nuovo due opzioni. Il primo è che è statico (un numero) o devi leggerlo dall'elemento genitore.

Nel mio caso sono 150 pixel dall'alto statico. Quindi, quando vedi 150, quanto è l'elemento dall'alto quando non abbiamo fatto scorrere.

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');
});

Questo è facile (come per HTML di seguito)

Il trucco è di NON utilizzare la parte superiore o sinistra dell'elemento (div) con "position: fixed;". Se questi non vengono specificati, l'elemento "contenuto fisso" apparirà RELATIVO all'elemento racchiuso (il div con "position: relative;") INSTEAD OF rispetto alla finestra del browser !!!

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

Sopra mi ha permesso di individuare un pulsante "X" di chiusura nella parte superiore di un sacco di testo in un div con scorrimento verticale. La "X" si trova al suo posto (non si sposta con il testo scorrevole e tuttavia si sposta a sinistra oa destra con il contenitore div racchiuso quando l'utente ridimensiona la larghezza della finestra del browser! Quindi è "riparata" verticalmente, ma posizionata rispetto a l'elemento di chiusura in orizzontale!

Prima di farlo funzionare, la "X" scorreva su e fuori dalla vista quando scorrevo il contenuto del testo verso il basso.

Mi scuso per non aver fornito la mia funzione hideDiv () di javascript, ma inutilmente renderebbe questo post più lungo. Ho scelto di mantenerlo il più breve possibile.

Ho creato un jsfiddle per dimostrare come funziona usando Transform.

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/

Ho lo stesso problema, uno dei membri del nostro team mi offre una soluzione. Per consentire la posizione della correzione div e relativa ad altri div, la nostra soluzione è quella di utilizzare un contenitore padre avvolgere il div fix e scorrere div.

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

Sì, è possibile finché non imposti la posizione ( topo left, ecc.) Del tuo fixedelemento (puoi comunque usare marginper impostare una posizione relativa). Simon Bos ne ha postato qualche tempo fa .

Tuttavia, non aspettarti che l'elemento fisso scorra con i parenti non fissi.

Guarda una demo qui .

Qualche tempo fa ho fatto qualcosa del genere. Ero abbastanza nuovo in JavaScript, quindi sono sicuro che puoi fare di meglio, ma ecco un punto di partenza:

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)
}

Dovrai impostare la larghezza, quindi ottiene la larghezza della finestra e cambia il margine ogni pochi secondi. So che è pesante, ma funziona.

È possibile se si utilizza JavaScript. In questo caso, il plugin Sticky-Kit jQuery :

Il mio progetto è .NET ASP Core 2 MVC Angular 4 template con Bootstrap 4. L'aggiunta di "sticky-top" nel componente principale dell'app html (ovvero app.component.html) nella prima riga ha funzionato, come segue:

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

È questa la convenzione o l'ho semplificata troppo?

Quando usi la position:fixedregola CSS e provi ad applicare top/ left/ right/ bottomposiziona l'elemento relativo alla finestra.

Una soluzione alternativa consiste nell'utilizzare le marginproprietà anziché top/ left/ right/bottom

Verificare questo:

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