how to put css max-left or min-left position to absolute object?

Question

I have an element with:

position:absolute;
left: 70%;

can I configure element for example to not move from left more than 900px? something like max-width but for positioning?

Answer 1

You can use CSS3 Media Queries to achieve that

So:

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

If you don't want it to overlay an object when you have a smaller screen or resize the window, you can add after that:

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

When the screen width is less than 980px, the #element object will be fixed to 220px.