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

Question

我有一个元素:

position:absolute;
left: 70%;

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

Answer 1

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

所以:

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

如果您在屏幕较小或调整窗口大小时不希望它覆盖对象,则可以在此之后添加:

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

当屏幕宽度小于980px,所述#element对象将被固定到220px.

Answer 2

我可以通过使用CSS 中的 min() 函数来做到这一点。

这仅对我有用，因为我试图放置在右侧的东西具有恒定的宽度。

所以我有这个...

#rightFloatyThing {
    left: min( calc(100vw - 278px) , 1002px );
}

278px 是右侧浮动物体的宽度。我想始终确保右侧漂浮物在视野范围内。所以它的左侧位置至少总是视图宽度减去右侧物体的宽度。

1002px 是我希望右侧浮动物体能够到达的最右边的距离

编辑： 请务必检查Can I Use for CSS math functions。直到 2020 年初，一些主要浏览器才支持它。

Answer 3

使用 CSS 做到这一点的唯一方法是删除绝对定位，并将其向右浮动。

放一个空的“pusher”div，向左浮动。给它一个 70% 的宽度，一个 900px 的最小宽度；然后将您的元素浮动在它旁边。

否则，您将不得不使用 Javascript。