Как поставить css max-left или min-left position на абсолютный объект?

У меня есть элемент с:

position:absolute;
left: 70%;

Могу ли я настроить элемент, например, чтобы не перемещаться с левого более 900 пикселей? что-то вроде max-width, но для позиционирования?

Ответ 1

Вы можете использовать запросы CSS3 Media для достижения этого

Итак:

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

Если вы не хотите, чтобы он перекрывал объект, когда у вас меньше экран, или измените размер окно, вы можете добавить после этого:

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

Если ширина экрана меньше 980px, объект #element будет привязан к 220px.

Ответ 2

Единственный способ сделать это с помощью CSS - удалить абсолютное позиционирование и поместить его вправо.

Поместите пустой "толкатель" div, расположенный слева. Дайте ему ширину 70% и минимальную ширину 900 пикселей; Затем поместите свой элемент рядом с ним.

В противном случае вам придется использовать Javascript.

Ответ 3

В качестве альтернативы вы можете обернуть абсолютно позиционированный элемент с относительно позиционированным элементом, который имеет минимальную ширину.