如何为绝对定位的元素“取消”左/右？答案

【问题标题】：How to "cancel" out left/right for absolutely positioned element?如何为绝对定位的元素“取消”左/右？
【发布时间】：2016-09-25 11:34:17
【问题描述】：

我有一个绝对定位的 div，我给它一个 left 位置。

对于桌面，left 位置必须为 100px。

但对于平板电脑，我想把它一直推到右边。

为了实现这一点，我尝试使用right: 0，但由于left: 100px 已在CSS 中定义，right: 0 不会按预期将其一直推到右侧。

然后我尝试在平板电脑中执行left: 0 以消除它所具有的效果，但这也不起作用。

有没有办法取消left 的位置？ left: none 之类的东西（我知道这不起作用，但这是我能够解释这一点的唯一方法。）

桌面 CSS：

.mydiv {
    positon: absolute;
    left: 100px;
}

平板 CSS：

@media (max-width:768px){
    .mydiv {
        left: 0;
        right: 0;
    }
}

我可以做类似right: 400px 之类的操作来让它到达我想要的位置，但我只是好奇是否有一种方法可以使用right: 0，所以我确定它被完全推到了右边.

谢谢！

【问题讨论】：

【解决方案1】：

要重置left 属性，请使用

left: auto;

您可以使用 CSS 引用来获取 CSS 属性的初始值。例如这里是 left 属性的引用：https://developer.mozilla.org/en/docs/Web/CSS/left

【讨论】：

【解决方案2】：

如果您想将绝对定位的元素一直移动到另一边，请使用100%。

换句话说，您不需要重置left 或使用right。只需覆盖left：

@media (max-width:768px){
    .mydiv {
        left: 100%;
    }
}

为了完美定位，您可能需要这个：

@media (max-width:768px){
    .mydiv {
        left: 100%;
        transform: translateX(-100%);
    }
}

由于left: 100% 会将元素100% 对齐到容器的另一侧基于元素的左边缘，这可能会导致元素消失在容器的右边缘之外。

transform 规则告诉元素将自身滑回其自身宽度的 100%。更多细节在这里：Element will not stay centered, especially when re-sizing screen

【讨论】：