Zu halten, wie div auf der linken Seite des Bildschirms, unabhängig von der Display-Größe?

Ich arbeite aktuell an einer Website, die verwendet einen Schieberegler an einem gewissen Punkt, aber anstelle der normalen Pfeile, die innerhalb der regler (Pfeile Links und rechts, für slider-navigation), die ich brauche, um die linke an den linken des Bildschirms, unabhängig von der Display-Größe und das gleiche mit dem rechten Pfeil. Es funktioniert nur mit meinem Bildschirm Größe ist derzeit (1.366 x 768), und der code ist

.bx-prev {
margin-left:-16.2%;
position:absolute;
margin-top:-200px;
}

.bx-next{
margin-left:86.2%;
position:absolute;
margin-top:-200px;
}

Jede Hilfe würde geschätzt werden. Auch wenn es getan werden könnte, am besten in Javascript/jQuery, ich bin auch offen zu, dass.

  • NB: Wenn Sie mit position: absolute mit Margen statt top / left / bottom / right haben, sind Sie wahrscheinlich etwas falsch machen.
  • Wenn ich oben/Links/unten/rechts bleibt es im inneren des Reglers .. ich muss brechen Sie aus und befestigen Sie es an der linken und rechten Bildschirmrand jeweils.
InformationsquelleAutor askome | 2011-10-28
  1. 5

    Müssen Sie position:relative auf das Eltern-element, dann können Sie position:absolute; in Bezug auf das Eltern-element

    .bx-prev {

position:absolute;
top:200px;
left: 0px;
    height:10px;
    width:10px;
    background:lime;
}

.bx-next{
    top:200px;
 height:10px;
    width:10px;
    background:lime;
position:absolute;

right: 0px;
}
.slider{
position:relative;
    width:500px;
        height:500px;
    background:red;
}   

<div class="slider">
    <div class="bx-next"></div>
    <div class="bx-prev"></div>
</div>

    Beispiel

    InformationsquelleAutor Kimtho6
  2. 3

    Sind Sie mit absoluter Positionierung, so dass Sie tun können:

    .bx-prev {
margin-left:-16.2%;
position:absolute;
margin-top:-200px;
left: 0px;
}

.bx-next{
margin-left:86.2%;
position:absolute;
margin-top:-200px;
right: 0px;
}
    • Dadurch ändert sich nichts für den Pfeil nach Links, eine Kappe zwischen den linken Bildschirm-Rand und der Pfeil wird angezeigt, wenn der Bildschirm größer und wenn kleiner der Pfeil wird nur ausgeblendet werden, indem der Bildschirm am linken Rand .. der Pfeil nach rechts ist einfach verschwunden, Weg, zu weit in den Bildschirm am rechten Rand.
    • Poste bitte die thml-code, wie ich deutlich misanderstood Sie.
    • arbeiten.codera.in/re
    InformationsquelleAutor andreapier
  3. 1

    Absolute Positionierung nimmt das element aus seinem Behälter heraus und ermöglicht es Ihnen, frei positionieren Sie es auf das Dokument mit top/bottom/left/right.

    Hier ein jsfiddle, das zeigt b innen a im markup, aber ich habe postioned es zu weit Links. Dies ist das gleiche mit c auf der rechten Seite.

    http://jsfiddle.net/w2CsF/1/

    InformationsquelleAutor Curt
  4. 0
    position: fixed;

    Ist die Antwort auf Ihre Frage.

    • Ich glaube nicht, dass Sie vollständig verstanden mich, oder ich einfach nur zu saugen, zu erklären, was ich aber meine ist, dass wenn der Bildschirm größer ist, es erscheint ein Raum zwischen dem linken Bildschirm und der Pfeil, es ist nicht mit ihm verbunden.
    InformationsquelleAutor Johan
Schreibe einen Kommentar