Befestigung ein div-Element an eine bestimmte position (bleibt fixiert mit Fenster resize)

Entnehmen Sie bitte meiner Website Vault X

Habe ich versucht, der Lichtschalter neben dem Tresor eine Klick-Funktion.

Aber ich Schaffe es nicht, meine div fixiert bleiben auf dieser position (einstellen der Fenstergröße bewirkt, dass es zu bewegen).

Was ist der beste Weg, dies zu erreichen?

InformationsquelleAutor Sean Zulu | 2012-04-25

  1. 4

    Weil die Grafik die Verankerung der horizontalen Mitte der Seite, die Sie verwenden können, die denselben Mittelpunkt haben, dann offset.

    #switch {
  height:50px;
  width:50px;
  background: #F00; /* Just so we can see it */
  position: absolute;
  top: 150px;
  left: 50%;  /* Put the left edge on the horizontal center */
  margin-left: 148px; /* Move it 148px to the right of the horizontal center, placing it over the lightswitch */
 }
    wenn ich dann die Größe der linken Seite des Fensters, wird das element immer noch verschieben.
    Es wird sich bewegen, aber mit dem center, die genau wie die Grafik. Es wird immer noch über den Lichtschalter in die Grafik so ändern Sie die Größe, die Breite der Fenster.
    es noch bewegt auf die Größe, aber ich kam mit der Lösung zu schaffen, den Schalter als separates Bild, so würde es keine Rolle, zu viel, wenn die Lage war etwas abseits.
    dieser Kommentar entfernt

    InformationsquelleAutor rgthree

  2. 6

    Tun position:absolute (oder besser gesagt hier position:fixed) legt die Elemente position, die außerhalb des normalen Fluss des Dokuments relativ zu dem ersten Elternteil, der eine andere position als statisch (in diesem Fall (und immer mit position:fixed) das browser-Fenster).

    Als solche, da Sie angegeben, ein top und eine richtige position, diese Werte sind Fix. Wenn Sie bewegen Sie die Rechte Grenze, die Entfernung von der browser-viewport muss die gleiche bleiben, so dass das element bewegt.

    Können Sie versuchen, die Positionierung von der linken Seite, aber das wird nur Schutz gegen die Größenänderung von rechts (wenn ich ziehen Sie den linken Ecken, die in sich das element verschieben)

    Alternativ sollten Sie die position mit diesem element statisch innerhalb des Dokuments, in Ihrem #wrapper div, so dass die Größe des Fensters hat keine Wirkung auf den Belegfluss.

    InformationsquelleAutor Thomas Jones

  3. 2

    Was Sie tun müssen, ist, darüber nachzudenken, wo Sie wollen, um das element zu werden (fixed-stick wird es in eine Lage X-Koordinate/Y -, absolut -, bewegt sich der mit dem Dokument, relativ ist ganz klar relativ zu, wo es ist).

    Also mit dieser sagte, würde ich empfehlen, eine "Anker-Punkt" mit 

    <div style="position: relative;" class="anchor-point">
   <div style="position: absolute; top: 100px; right: 50px;">
   <img href="" />
   </div>
</div>

    Den anchor-point bedeutet, dass Sie kleben können dieses element in den Bereich Ihrer Seite, der innere Teil, mit position:absolute; können Sie sich VON Ihrem Anker auf, wohin Sie wollen (oben/rechts/Links/unten), verbinden Sie diese mit z-index auf Ebene Ihrer Elemente, wie Sie es wollen.

    Hierdurch wird sichergestellt, dass das element (pos:abs) bleiben, wo Sie es wollen.

    InformationsquelleAutor Jakub

Schreibe einen Kommentar