CSS: Problem rozdzielczości absolutny ekran

Question

CSS kod:

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

Zrobiłem powyższy kodujących pływający div kiedy pracowałem na 1024, ale gdy testowałem to samo w innej rozdzielczości to się wyrównania.

Jak możemy to naprawić?

Answer 1

Absolutnie rozmieszczone elementy są pozycjonowane odpowiednio do względnie usytuowanego przodka lub okna. Brzmi jak w twoim przypadku, jest on umieszczony w oknie.

Sposobem naprawienia tego jest umieszczenie bezwzględnie umieszczonego <div> wewnątrz odpowiedniego pojemnika. W ten sposób, jak wielkość zmiany okna, pozostanie ono w odpowiednim miejscu:

<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

Zamiast pikseli, należy użyć %. Może pomóc w uzyskaniu wyniku.

Answer 3

Zakładając, że element nie jest zawarty w innym elemencie z pozycją względną, pozycjonowany element powinien znajdować się w tej samej pozycji niezależnie od rozdzielczości.

Upewnij użyć:

top: 45px 
left: 98px 

Zostawiłeś deklarację pikseli off w kodzie powyżej.

Również, float: prawy nie jest wymagany na pozycjonowanym elemencie, ponieważ position: absolute i tak wyjmie go poza normalny przepływ dokumentu.

Answer 4

Żadne z powyższych rozwiązań nie działa dla mnie ... utrzymać go na pozycji absolutnej i dać margin-top, margin-left ... w % wiek lubię;

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

która automatycznie dostosować w.r.t. rozdzielczość ekranu ...

to działało idealnie dla mnie. testowane w różnych rozdzielczościach.

Miłej zabawy!