CSS定位是一種布局元素的方法,它允許您指定元素在文檔中的位置。CSS定位由三個狀態組成:靜態定位、相對定位和絕對定位。
靜態定位是元素的默認位置狀態。在頁面流的順序中,從上到下。您可以使用position:static;
來強制使用靜態定位。
p { position: static; }
相對定位可讓元素相對于當前位置移動。相對定位不影響其他元素的位置。您可以使用position:relative;
給元素相對定位。
p { position: relative; left: 30px; top: 20px; }
絕對定位允許您將元素放在頁面的任何位置,不會影響其他元素的位置。與相對定位不同,絕對定位不會受滾動的影響。您可以使用position:absolute;
來給元素絕對定位。
p { position: absolute; left: 50px; top: 75px; }
除了三種基本定位狀態之外,CSS還提供了固定定位和粘滯定位。固定定位類似于絕對定位,但元素會固定在瀏覽器窗口中的位置。您可以使用position: fixed;
來設置固定定位。
p { position: fixed; bottom: 0; right: 0; }
粘滯定位與固定定位類似,不過它會根據滾動條的位置移動。您可以使用position: sticky;
來設置粘滯定位。
p { position: sticky; top: 0; }
除了position
屬性外,CSS還提供了許多其他屬性來幫助布局頁面,例如z-index
、display
、float
等等。
上一篇css定位默認值
下一篇css定位隨著滑動而變化