CSS position: absolute Bildschirmauflösung Problem

Question

CSS-Code:

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

ich die obige Codierung getan haben für eine schwebende div, als ich auf 1024 Auflösung arbeiten, aber wenn ich das gleiche auf einer anderen Auflösung getestet, es ist out der Ausrichtung.

Wie können wir es beheben?

Answer 1

Absolut positionierte Elemente werden entweder nach einem relativ positionierten Vorfahren oder dem Fenster positioniert. Es klingt wie in deinem Fall, es wird im Fenster positioniert.

Der Weg, um dies zu beheben ist, Ihre absolut positioniert <div> in einem relativen Container zu setzen. Auf diese Weise, wie die Fenster ändert die Größe, wird es an der richtigen Stelle bleiben:

<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

Verwenden Sie anstelle von Pixel die %. Es kann Ihnen helfen, die Ausgabe zu produzieren.

Answer 3

Angenommen, das Element ist nicht in einem anderen Element mit einer relativen Position enthalten, sollte das Element, das Sie positionieren, unabhängig von der Auflösung an der gleichen Position sein.

Stellen Sie sicher, Sie verwenden:

top: 45px 
left: 98px 

Sie die Pixel-Deklaration aus oben im Code belassen.

Auch float: right wird für das positionierte Element nicht benötigt, da position: absolute es aus dem normalen Dokumentfluss herausholt.

Answer 4

Keine der oben genannten Lösungen für mich arbeiten ... es hält auf absolute Position und margin-top geben, margin-left ... in % alter mögen;

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

das wird automatisch w.r.t. einstellen Bildschirmauflösung ...

das funktionierte perfekt für mich. auf verschiedene Auflösungen getestet.

Spaß haben!