如何将CSS的max-left或min-left属性应用于绝对定位的对象？

Question

我有一个带有以下内容的元素：

position:absolute;
left: 70%;

例如，我可以配置元素，使其不向左移动超过900像素吗？类似于max-width但用于定位？

- zur4ik

---

你无法仅使用CSS完成这个。你需要一些JavaScript/jQuery来将左偏移设置为最大值。如果不看到元素与布局的交互方式，很难建议任何东西。 - Marc Audet

Answer 1

您可以使用CSS3媒体查询来实现这一点。

因此：

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

如果您不希望在屏幕较小或调整窗口大小时它覆盖物体，您可以添加以下内容：

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

当屏幕宽度小于980像素时，#element对象将固定为220像素。

- Uxío

Answer 2

通过使用CSS中的min()函数，我能够实现这一点。

这只对我起作用，因为我试图在右侧定位的东西具有恒定的宽度。

所以我的代码是这样的...

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

278像素是右侧浮动元素的宽度。我希望始终确保右侧的浮动元素在视图内可见。因此，它的左侧位置始终至少是视图宽度减去右侧元件的宽度。

1002像素是右侧浮动元素能够到达的最远位置。

编辑：请确保查看Can I Use for CSS math functions。在2020年初之前，一些主要浏览器不支持该特性。

- rgbflawed

---

最佳答案在这里。 - kiranr

我不知道这个甚至存在:D - scipper

Answer 3

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

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

否则，您必须使用JavaScript。

- BBagi

Answer 4

或者您可以使用相对定位元素包裹绝对定位元素，并设置一个最小宽度。

- matthijs koevoets