Question

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

Answer 1

如果没有指定height或width，并且相关元素的位置为absolute或fixed，则指定top 和 bottom（或left 和 right）实际上意味着什么 - 您可能希望灯箱距离身体的每个边缘20像素例如，占用所有剩余的空间。

然而，如果使用relative定位，或者当其他指定维度无法进行计算时，则指定距离两边的距离将导致指令冲突，因此浏览器将被强制取一个而不是另一个。 top和left是布局（以及西方文字中的文字）的自然优先级，所以它们是任意的。

您可以通过指定top值重置left和auto，从而优先bottom和right：

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

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

Answer 2

我尝试通过设置右侧或底部来覆盖顶部和左侧的元素样式位置

首先，您无法使用top和left

覆盖right和bottom属性

如果要覆盖它们，则需要设置类似

的值

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

/* Don't leave them blank */

现在我要回答第二个问题。

永远不会看到人们使用正确和最低属性，我可以在哪里有效地使用这些属性

举个例子，你需要一个位于容器元素右侧和底部的按钮，元素height和width是动态的，所以在这种情况下你需要使用{{1} }和right: 0;因为您无法定位来自bottom: 0;和left的元素，因为您不知道从{{1}获取元素需要多少top或者来自px，因为元素大小是动态的。

Answer 3

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

为什么浏览器优先考虑右下风格的左右瞬间？

3 个答案: