Question

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

对于桌面，必须具有100px的left位置。

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

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

然后我尝试在平板电脑中执行left: 0以取消它所具有的效果但是也没有效果。

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

桌面CSS：

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

Tablet CSS：

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

我可以做right: 400px这样的事情，让它达到我想要的位置但是我只是好奇我是否有办法可以使用right: 0所以我肯定知道它被推了完全在右边。

谢谢！

Answer 1

重置left属性使用

left: auto;

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

Answer 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