Comment garder la div sur la gauche de l'écran, quelle que soit la taille de l'écran?

Je suis actuellement en train de travailler sur un site qui utilise un curseur à un certain point, mais au lieu de l'ordinaire flèches qui se trouvent à l'intérieur du curseur (flèches gauche et droite, pour curseur de navigation) j'ai besoin d'obtenir le gauche, attaché à la gauche de l'écran, quelle que soit la taille de l'écran et la même chose avec la flèche de droite. Il ne fonctionne qu'avec ma taille de l'écran actuellement (1366x768) et le code est

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

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

Toute aide serait appréciée. Même si cela peut être fait de mieux en Javascript/jQuery, je suis également ouvert à cela.

  • NB: Si vous utilisez position: absolute avec des marges au lieu de top/left/bottom/right, vous êtes probablement faire quelque chose de mal.
  • Si j'utilise haut/gauche/bas/droite, il va rester à l'intérieur du curseur .. j'ai besoin de le casser et de le joindre à la gauche et le bord droit de l'écran, respectivement.
InformationsquelleAutor askome | 2011-10-28
  1. 5

    Vous devez ajouter position:relative à l'élément parent, alors vous pouvez utiliser position:absolute; dans associé à l'élément parent

    .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>

    exemple

    InformationsquelleAutor Kimtho6
  2. 3

    Vous d'utiliser le positionnement absolu, de sorte que vous pouvez faire:

    .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;
}
    • Cela ne changera rien pour la flèche de gauche, un cap entre la gauche, le bord de l'écran et la flèche apparaîtra si l'écran plus grand et si petit à la flèche sera juste caché par l'écran du bord gauche .. la flèche vers la droite est tout simplement disparu trop loin dans l'écran du bord droit.
    • Veuillez poster le thml code que j'ai clairement misanderstood vous.
    • travail.codera.en/re
    InformationsquelleAutor andreapier
  3. 1

    Positionnement absolu prend l'élément de son conteneur et permet de positionner librement sur le document à l'aide de top/bottom/left/right.

    Ici est un jsfiddle qui montre b à l'intérieur de a dans le balisage, mais j'ai postioned à l'extrême gauche. C'est la même chose avec c à droite.

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

    InformationsquelleAutor Curt
  4. 0
    position: fixed;

    Est la réponse à votre question.

    • Je ne pense pas que vous avez pleinement compris moi ou je viens de le sucer à expliquer, mais ce que je veux dire, c'est qu'à chaque fois que la taille de l'écran est plus grand il apparaîtra un espace entre l'écran de gauche et la flèche, il n'est pas attaché à elle.
    InformationsquelleAutor Johan