CSS: schermo assoluta problema di risoluzione

Question

CSS codice:

top:45; 
left:98; 
float:right; 
position:absolute;z-index:2; 

ho fatto la codifica sopra per un flottante div quando stavo lavorando sul 1024, ma quando ho provato lo stesso su una risoluzione diversa è fuori di allineamento.

Come possiamo risolvere il problema?

Answer 1

elementi posizionati in modo assoluto sono posizionati secondo o un antenato relativamente posizionato o la finestra. Sembra che nel tuo caso sia posizionato nella finestra.

Il modo per risolvere questo problema è quello di mettere il vostro posizionato in modo assoluto <div> all'interno di un contenitore relativo. In questo modo, come la dimensione finestra cambia, rimarrà nel punto corretto:

<div style="position: relative"> 
    <div style="position: absolute; left: 98px; top: 45px;"> 
     This div will always be 98px from the left and 45px from the top of its parent . 
    </div> 
</div> 

Answer 2

Invece di pixel, utilizzare il %. Potrebbe aiutarti a produrre l'output.

Answer 3

Supponendo l'elemento non è contenuto all'interno di un altro elemento con una posizione relativa, l'elemento che si sta posizionando deve essere nella stessa posizione indipendentemente dalla risoluzione.

assicurarsi di utilizzare:

top: 45px 
left: 98px 

Hai lasciato la dichiarazione pixel fuori nel codice sopra.

Inoltre, float: right non è richiesto sull'elemento posizionato, come posizione: absolute lo toglierà comunque dal normale flusso del documento.

Answer 4

Nessuna delle soluzioni sopra funziona per me ... tenerlo a posizione assoluta e dare margin-top, margin-left ... in % età come;

margin-top:10%; 
margin-left:5%; 

che si automaticamente regolare w.r.t. risoluzione dello schermo ...

questo ha funzionato perfetto per me. testato su diverse risoluzioni.

divertiti!