CSS3中定位元素是指通過CSS樣式表來控制網(wǎng)頁中某一元素的位置和大小。CSS3中定位元素具有很強(qiáng)的靈活性,可以讓開發(fā)人員將網(wǎng)頁中的各個(gè)元素盡可能地靈活地放置。
#element{ position:absolute; top:50px; left:100px; }
以上代碼演示如何使用CSS3中的定位屬性來控制元素的位置。其中position屬性用來設(shè)置定位類型,可以設(shè)置的值有static、relative、fixed和absolute等。top和left屬性則設(shè)置了元素距離頁面頂端和左側(cè)的距離,單位可以是px、em、%等。
#element{ position:relative; left:50px; }
另一種常用的定位屬性是relative,與absolute類似,但相對(duì)于元素本身的位置定位。可以通過設(shè)置left和top屬性來控制元素相對(duì)于當(dāng)前位置的移動(dòng)。此種定位并不會(huì)改變頁面中其他元素的位置。
#element{ position:fixed; top:0; }
fixed屬性可以實(shí)現(xiàn)元素的“固定”定位,使得該元素?zé)o論頁面上下滾動(dòng)都保持在同一位置。可以通過設(shè)置top、right、bottom和left等值來控制元素的位置。
#element{ position:absolute; bottom:20px; right:20px; }
最后,需要注意的是定位屬性也可以同時(shí)使用top、right、bottom和left等屬性,以實(shí)現(xiàn)精細(xì)的定位效果。