爲什麼瀏覽器會優先考慮右側和底部樣式的左上角和右下角？

Question

當我嘗試覆蓋元素樣式位置頂部，並通過設置右邊或底部 它不起作用，左側和頂部屬性只在瀏覽器的關注，從來沒有看到人們使用右側和底部屬性我可以在哪裏使用那些有效的屬性。

Answer 1

您需要設置您的top: auto; left: auto以覆蓋您之前的設置，並使用右下角代替。

Answer 2

我嘗試重寫一個元素風格位置上方，並通過設置右側或底部

首先你不能。如果你想覆蓋他們，你需要重寫使用right和bottom

top和left性質離開設置值如

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

/* Don't leave them blank */ 

現在我要談到第二個問題。

永遠也看不到我在哪裏可以使用這些屬性有效

拿一個例子，你需要定位的權利和容器元素的底部和元素的按鈕，人們使用權和底部性質height和width是動態的，所以在這種情況下，您需要使用right: 0;和bottom: 0;，因爲您無法定位left和top中的元素，因爲您不知道需要多少px將left或top中的元素作爲元素大小動態。

Answer 3

如果沒有指定height或width，並且有問題的元件位置absolute或fixed，然後同時指定一個top和bottom（或left和right）實際上意味着什麼 - 你可能想的燈箱例如，距離身體的每個邊緣20個像素，並佔據所有剩餘空間。

但是，如果使用relative進行定位，或者其他指定的尺寸不可能進行計算，那麼指定距離兩邊的距離會導致指令衝突，因此瀏覽器被迫相互重疊。 top和left是佈局（和西方腳本中的文本）的自然優先級，所以它們是任意的。

但是，您可以通過指定auto值，讓您的bottom和right佔先重置top和left：

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

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