css - 为什么浏览器优先考虑左右样式的上下瞬间？

Question

当我尝试通过设置 right 或 bottom 来覆盖元素样式位置 top 和 left 它不起作用时，left 和 top 属性仅在浏览器的关注中，并且永远不会看到人们使用 right 和 bottom 属性，我可以在哪里有效地使用这些属性。

Answer 1

如果没有指定heightor width，并且有问题的元素具有位置absoluteor fixed，那么同时指定 atop 和 bottom（或left and right）实际上意味着什么——例如，您可能希望灯箱距离主体的每个边缘 20 像素，并占据所有剩余空间。

但是对于relative定位，或者当其他指定的尺寸使计算变得不可能时，那么指定到两个边缘的距离将导致指令冲突，因此浏览器被迫接管另一个。top并且left是布局（和西方文字中的文本）的自然优先级，因此它们被任意采用。

但是，您可以重置top并left通过指定auto值，允许您的bottomandright优先：

/* previous rules */
.thing {
    top: 20px;
    left: 20px;
}

/* your rule */
.thing {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
}

Answer 2

我尝试通过设置 right 或 bottom 来覆盖元素样式位置 top 和 left

首先，您不能使用and覆盖top和left属性rightbottom

如果你想覆盖它们，你需要设置像

element.class {
   top: [auto, inherit, px, %];
   left: [auto, inherit, px, %];
}

/* Don't leave them blank */

现在我来到这里的第二个问题。

从来没有看到人们使用 right 和 bottom 属性我在哪里可以有效地使用这些属性

举个例子，你需要一个按钮位于容器元素的右侧和底部，并且元素height是width动态的，所以在这种情况下你需要使用right: 0;andbottom: 0;因为你不能从leftand定位元素top，因为你不知道如何由于元素大小是动态的，因此您px需要从中获取元素left或从中获取元素。top

Answer 3

您需要设置您的top: auto; left: auto以覆盖以前的设置，并改为使用右下角。