在CSS樣式表中,樣式定位屬性用于控制元素在頁面上的顯示位置,其主要有以下幾個屬性:
position: relative; position: absolute; position: fixed; position: static;
相對定位(position: relative)
相對定位是指相對于元素的原始位置作偏移。通過設置相對定位,可以通過left、top屬性控制元素在頁面上的位置。
.box{ position:relative; left:50px; top:50px; }
絕對定位(position: absolute)
絕對定位是指基于元素的父級容器的位置進行偏移,如果父級沒有設置position屬性,則會基于body元素。通過設置絕對定位,可以使用left、top、right、bottom屬性控制元素在頁面上的位置。
.box{ position:absolute; left:50px; top:50px; }
固定定位(position: fixed)
固定定位是指基于瀏覽器窗口進行定位,不隨頁面滾動而改變位置。通過設置固定定位,可以使用left、top、right、bottom屬性控制元素在頁面上的位置。
.box{ position:fixed; right:0; bottom:0; }
靜態定位(position: static)
靜態定位是元素的默認定位屬性,不會進行任何偏移。通過設置靜態定位,可以清除元素之前設置的定位屬性。
.box{ position:static; }
綜上所述,CSS樣式定位屬性可以幫助我們控制頁面元素的位置,使頁面布局更加靈活多變。
上一篇css樣式如何插入圖片
下一篇css懸浮改變其他屬性