Posiziona un oggetto in alto a destra nella pagina

Ho aggiunto il famoso nastro "Fork me on Github" a uno dei miei progetti. Il tag è simile al seguente:Posiziona un oggetto in alto a destra nella pagina

<a href="https://github.com/Nurdok/htmlify"> 
    <img style="position: absolute; top: 0; right: 0; border: 0;" 
    src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
    alt="Fork me on GitHub"> 
</a>

E sembra grande, ma alcuni dei div s sulla mia pagina web avere una lunghezza minima, in modo che quando la finestra è piccola, si deve scorrere la schermata in senso orizzontale. Quando ciò accade, voglio che il link "Fork me on Github" rimanga nella parte superiore destra della pagina , non nella finestra. Questo è come appare in questo momento:

scorrere tutta la strada a sinistra:
enter image description here

fatto scorrere tutta la strada a destra:
enter image description here

Sembra che il nastro è posto su il lato in alto a destra della finestra iniziale e rimane statico. Quello che voglio è che sia fuori dalla vista nel primo caso e in alto a destra nel secondo caso (quando scorro a destra).

Modifica: Grazie per le risposte rapide, persone. Tuttavia, la maggior parte delle risposte ha fatto scorrere il nastro orizzontalmente e verticalmente con la pagina. Quello che voglio è che sia fissato sul lato in alto a destra della pagina (non la vista del browser), e può essere visto solo se scorro fino a dove si trova la sua posizione.

fonte

2013-05-17 Amir Rachum

È il primo elemento nel corpo della pagina o è figlio di un altro elemento? – j08691

È un bambino, ma può essere qualunque sia la risposta che dice. –

@AmirRachum, la mia risposta dovrebbe fare il trucco, ma è stata downvoted Non so perché :) – Wiktor

si può fare un po 'di trucco e mettere la vostra immagine in un div che ha una larghezza minima.

<div style="position:relative;min-width:960px"> 
<img src="..." style="position: absolute;right:0;top:0" /> 
</div>

e mettere che div all'inizio del <body> sezione.

position:relative fa che tutti i figli di quegli elementi che hanno position:absolute sono posizionati in assoluto in base al che div, non tutta la pagina. Quando viewport è più grande di min-width, il div è della stessa larghezza del viewport. Quando il viewport è più piccolo, il div avrà la larghezza minima e l'immagine rimarrà nell'angolo del div.

fonte

2013-05-17 14:05:16 Wiktor

Con una scelta corretta del valore 'min-width', questo ha risolto il mio problema. Non ho idea del motivo per cui è downvoted. –

Ha risolto anche il mio problema. Voglio solo renderlo trasparente attraverso il div –

due alternative

attaccarsi alla Viewport: a bastone per le viewport si dovrebbe posizionare il vostro elemento "fisso" al posto di "assoluto"

<img style="position: fixed; top: 0; right: 0; border: 0;"

Attaccare a un contenitore: E se si vuole che sia incollato ad un contenitore (in modo youn non vedi quando si naviga a sinistra) usa assoluto, ma fate che la posizione del contenitore: relativa modo suo blocco contenitore è mirata

Se non volete per vedere l'immagine quando si scorre a sinistra quindi utilizzare una larghezza esplicita per questo contenitore di cui sto parlando Ecco un esempio JSFiddle.

Ho usato un div al quadrato invece di un'immagine. codice CSS come segue:

#container { 
    width: 700px; 
    height: 700px; 
    background: #55ff90; 
    position: relative; 
} 

#image { 
    width: 70px; 
    height: 60px; 
    background: #ffff90; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
}

fonte

2013-05-17 14:01:11 Fico

Quindi se qualcuno scorre verticalmente sarà sempre visibile – j08691

@ j08691Sure! Ovviamente. – Fico

@Fico vedi la mia modifica. –

Change position: absolute;-position: fixed.

Come nota a margine, mettere lo stile sulla a invece dell'immagine e aggiungere un po z-index per assicurarsi che rimane in cima a tutto il resto:

<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;"> 
    <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
    alt="Fork me on GitHub"> 
</a>

fonte

2013-05-17 14:02:21 RaphaelDDL

noti che 'position: fixed' funziona in modo leggermente diverso su mobile a causa del suo funzionamento - vedrai effettivamente l'immagine" saltare "dopo aver rilasciato il dito, non muoverti mentre scorri come accade sul web normale. – hexblot

@hexblot Ricorda che 'fixed' funziona solo su iOS 5+ ed è bacato come hai detto tu. Continuo a sfarfallio durante lo scorrimento. Solo su iOS6 + che Apple ha corretto il 'fisso' per renderlo più fluido durante lo scorrimento. – RaphaelDDL

+1 per il suggerimento 'z-index' - in combinazione con la soluzione accettata, ha risolto il mio problema. Grazie! –

Nel caso in cui si supponga di attenersi alla parte superiore destra solo su scorrimento orizzontale, non è possibile eseguire ciò con CSS di base. Il tuo requisito è di stare in alto a destra per lo scroll orizzontale ma non per lo scroll verticale. La prima parte del requisito può essere eseguita utilizzando position: fixed; sebbene ciò interrompa la seconda parte.

ne dite sempre attaccare alla parte superiore destra del sito web utilizzando un galleggiante relativa: Fiddle

<div id='container'> 
    <div id='sticky'>x</div> 
</div> 

#sticky { 
    width: 100px; 
    height: 100px; 
    background: red; 
    float: right; 
} 

#container { 
    width: 100%; 
    height: 200px; 
    background: blue; 
}

fonte

2013-05-17 14:13:48 Aquillo

Voglio che rimanga in alto a destra e rimanga fermo. A meno che non riesca a vedere l'angolo in alto a destra della pagina, non dovrei vederlo. –

Nel caso in cui segui il violino, vedrai che questo rimane sempre nell'angolo in alto a destra del tuo sito Web, che è il tuo requisito? – Aquillo

Si attacca in alto a destra nella finestra del browser, non nella pagina. –

Si dovrebbe usare float:right, regolando margin se avete bisogno, per es .: margin-right: 5px. Saluti :)

fonte

2013-05-17 14:20:43 konnigun

Se ho capito cosa vuoi correttamente, ti piacerebbe che l'immagine si attacchi all'angolo superiore della finestra FINO A quando la finestra raggiunge una certa dimensione (orizzontalmente) e poi si attacca.

Se è così, ecco una soluzione plausibile:

body{ 
    min-width:1000px; /* or whatever you need it to be */ 
} 

#ribbon{ 
    position:relative; 
    float:right; 
}

DEMO FIDDLE

DEMO FULLSCREEN

È anche possibile utilizzare un div contenitore con min-width, la vostra scelta.

fonte

2013-05-17 14:36:52

Posiziona un oggetto in alto a destra nella pagina

risposta

Problemi correlati