如何将css max-left或min-left位置放到绝对对象？

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?

我可以配置元素例如不从左移动超过900px？最大宽度但定位的东西？

3 个解决方案

#1

You can use CSS3 Media Queries to achieve that

您可以使用CSS3媒体查询来实现这一目标

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.

当屏幕宽度小于980px时，＃element对象将固定为220px。

#2

The only way to do this with CSS is to remove the absolute positioning, and float it to the right.

使用CSS执行此操作的唯一方法是删除绝对定位，并将其浮动到右侧。

Put an empty "pusher" div, floated left. Give it a width of 70%, and a min-width of 900px; Then float your element beside it.

放一个空的“推动器”div，向左浮动。宽度为70％，最小宽度为900px;然后将元素浮动在它旁边。

Otherwise you'll have to use Javascript.

否则你将不得不使用Javascript。

#3

Alternatively you could wrap the absolutely positioned element with a relatively positioned element which has a min-width.

或者，您可以使用具有最小宽度的相对定位的元素来包裹绝对定位的元素。

#1