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

Question

我有一个元素：

position:absolute;
left: 70%;

例如，我可以将元素配置为不从左侧移动超过 900 像素吗？像 max-width 但用于定位？

score 32 · Accepted Answer

您可以使用CSS3 媒体查询来实现

所以：

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

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

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

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

score 8 · Accepted Answer

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

所以我有这个...

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

278px 是右侧浮动对象的宽度。我想始终确保右侧漂浮的东西在视野范围内。因此，它的左侧位置将始终至少是视图宽度减去右侧事物的宽度。

1002px 是我想要右侧浮动的最右边的东西

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

score 6 · Accepted Answer

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

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

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

score 3 · Accepted Answer

3

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

于 2014-05-21T09:51:38.437 回答

4 回答 4