comment mettre la position css max-left ou min-left sur un objet absolu?

Question

J'ai un élément avec:

position:absolute;
left: 70%;

puis-je configurer l'élément par exemple pour ne pas bouger de gauche de plus de 900px? quelque chose comme max-width mais pour le positionnement?

Answer 1

Vous pouvez utiliser CSS3 Media Queries pour y parvenir

Donc:

#element {
  position:absolute;
  left: 70%;
}

Si vous ne voulez pas qu'il superpose un objet lorsque vous avez un écran plus petit ou redimensionne la fenêtre, vous pouvez ajouter après cela:

@media all and (max-width: 980px) {
    #element{
        margin-left: 0px;
        left: 220px;
    }
}

Lorsque la largeur de l'écran est inférieure à 980 pixels, l'objet # élément sera fixé à 220 pixels.

Answer 2

La seule façon de le faire avec CSS est de supprimer le positionnement absolu et de le faire flotter vers la droite.

Mettez un div "pousseur" vide, flottait à gauche. Donnez-lui une largeur de 70% et une largeur minimale de 900 px; Faites ensuite flotter votre élément à côté.

Sinon, vous devrez utiliser Javascript.

Answer 3

Alternativement, vous pouvez envelopper l'élément absolument positionné avec un élément relativement positionné qui a une largeur minimale.