Posizione CSS: fissa all'interno di un elemento posizionato

Ho un div posizionato il cui contenuto può essere troppo lungo in modo da far apparire le barre di scorrimento (set overflow:auto). Funziona come una finestra di dialogo in un'app ajax. Voglio fissare un pulsante di chiusura sul suo angolo in alto a destra in modo che quando l'utente fa scorrere il div, non scorrono.Posizione CSS: fissa all'interno di un elemento posizionato

L'ho provato con position:fixed; right:0; top:0 ma ha posizionato il pulsante nella parte superiore destra della pagina non nel div (in firefox).

È possibile eseguire questa posizione di pulsante utilizzando solo CSS senza eseguire l'hacking con offsetWidth/Height in js su ogni evento di scorrimento?

ps: l'altezza e la larghezza del div non è un valore fisso, dipende dalle dimensioni del contenuto e dalle dimensioni della finestra del browser. L'utente può anche ridimensionarlo se lo desidera.

fonte

2011-02-10 Calmarius

Potrebbe essere utile prendere in considerazione l'utilizzo di un div con un'immagine di sfondo a posizione fissa per il pulsante. – cloudrave

@NickM sembra una buona idea, ma come faresti a fare clic sul pulsante? – ithil

@ithil Fintantoché l'altezza e la larghezza del div sono impostate in modo da corrispondere a quelle dell'immagine di sfondo, dovrebbe essere selezionabile. Per quanto riguarda * la gestione * del clic, dipende dal fatto che tu stia utilizzando un semplice codice HTML o JS. Se è solo HTML, puoi dividere il div in un tag 'a' con un' href' (o anche solo usare un tag 'a' invece di un' div' e impostarlo come 'display: inline-block'). Se è JS, puoi ascoltare un clic sul 'div'. Ho capito correttamente la tua domanda? – cloudrave

È possibile utilizzare position:fixed;, ma senza il set left e top. Poi lo spingerai a destra usando margin-left, per posizionarlo nella giusta posizione che desideri.

controllare una demo qui: http://jsbin.com/icili5

fonte

2011-02-10 20:39:00 Sotiris

sei il benvenuto ragazzi :) – Sotiris

@Sotiris puoi fornire un riferimento che spieghi perché questo dovrebbe funzionare? Perché i browser devono posizionare un elemento 'fixed' in questo modo quando' top' e 'left' non sono specificati? http://stackoverflow.com/questions/8712047/positionfixed-when-left-top-right-bottom-arent-specified-desired-results-in – Flash

Ho scritto il JS più contorto fino a quando non sono inciampato su questo. Bello. – collin

Position:fixed fornisce una posizione assoluta relativa alla finestra BROWSER. quindi ovviamente va lì.

Mentre position:absolute si riferisce all'elemento genitore, quindi se si posiziona il pulsante <div> all'interno del < div> del contenitore, si dovrebbe posizione in cui si intende che sia. Qualcosa come

EDIT: grazie a @Sotiris, che ha un punto, la soluzione può essere raggiunta utilizzando una posizione: fissa e un margine sinistro. In questo modo: http://jsfiddle.net/NeK4k/

fonte

2011-02-10 20:32:03

L'utente può scostare il pulsante di chiusura se uso assoluto (era il mio primo tentativo prima che venisse risolto). – Calmarius

Sembra che tutti i lettori errati vogliano tenerlo sullo schermo. In tal caso, devi usare javascript per posizionarlo correttamente in relazione al div in questione, o usare javascript per scorrerlo correttamente mentre usi la posizione: assoluta – Dominic

pare, le trasformazioni CSS possono essere utilizzati

" 'trasformare' proprietà stabilisce un nuovo sistema di coordinate locale l'elemento",

ma ... questo non è cross-browser, sembra solo Opera funziona correttamente

fonte

2012-04-03 10:44:40 4esn0k

Ora funziona in Chrome e Firefox. Ecco un esempio. http://codepen.io/anon/pen/ZOqrYo –

Grazie @PatrickMcElhaney per il tuo esempio, questa è la soluzione che stavo cercando :) – c01gat3

Se il pulsante di chiusura sarà testo, questo funziona molto bene per me:

#close { 
    position: fixed; 
    width: 70%; /* the width of the parent */ 
    text-align: right; 
} 
#close span { 
    cursor: pointer; 
}

Allora la vostra HTML può essere solo:

<div id="close"><span id="x">X</span></div>

fonte

2014-03-26 18:19:14 thatmiddleway

La soluzione attuale selezionato sembra aver capito male il problema.

Il trucco è di non utilizzare il posizionamento assoluto o fisso. Invece, tenere il pulsante di chiusura al di fuori del div con la sua posizione impostata su e un float sinistro in modo che sia immediatamente a destra del div. Quindi, imposta un margine sinistro negativo e un indice z positivo in modo che appaia sopra il div.

Ecco un esempio:

#close 
    { 
     position: relative; 
     float: left; 
     margin-top: 50vh; 
     margin-left: -100px; 
     z-index: 2; 
    } 

#dialog 
    { 
     height: 100vh; 
     width: 100vw; 
     position: relative; 
     overflow: scroll; 
     float: left; 
    } 

<body> 
    <div id="dialog"> 
    **** 
    </div> 

    <div id="close"> </div> 
</body>

fonte

2015-02-08 11:26:52 Joseph

Risposta impressionante, mi ha fatto sul percorso di una soluzione migliore per avere un elemento fissato all'interno di un div scorrevole – RebelFist

So che questo è un vecchio post, ma ho avuto la stessa domanda, ma non ho trovato una risposta che impostare l'elemento fisso rispetto ad un genitore div.La barra di scorrimento su medium.com è un'ottima soluzione CSS pura per l'impostazione di qualcosa position: fixed; relativa a un elemento padre anziché la vista (tipo *). E si ottiene impostando il genitore div-position: relative; e avendo un involucro pulsante con position: absolute; e il pulsante del corso è position: fixed; come segue:

<div class="wrapper"> 
    <div class="content"> 
    Your long content here 
    </div> 

    <div class="button-wrapper"> 
    <button class="button">This is your button</button> 
    </div> 
</div> 

<style> 
    .wrapper { 
    position: relative; 
    } 

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

    .button { 
    position: fixed; 
    top: 0; 
    width: 50px; 
    } 
</style>

working example

* Dal momento che gli elementi fissi non scorrere con la pagina la posizione verticale sarà ancora relativa al viewport ma la posizione orizzontale è relativa al genitore con questa soluzione.

fonte

2016-08-02 19:05:07 Lifehack

Provare posizione: appiccicoso sul div genitore dell'elemento che si desidera correggere.

Ulteriori informazioni qui: http://html5-demos.appspot.com/static/css/sticky.html. Attenzione: verificare la compatibilità della versione del browser.

fonte

2017-06-30 09:01:18

Posizione CSS: fissa all'interno di un elemento posizionato

risposta

Problemi correlati