CSS中的定位是指讓元素在頁面中的位置發生改變,包括位置、大小、以及層次關系。在定位中,常用的屬性有position和z-index。
/* position屬性有5個值 */ /* static:默認屬性值 */ /* relative:相對于元素原來的位置進行定位,不影響其他元素的位置 */ /* absolute:相對于最近的已定位父元素進行定位 */ /* fixed:相對于窗口進行定位,不隨頁面滾動而滾動 */ /* sticky:相對于父元素進行定位,當頁面滾動到一定位置時會一直停留在該位置 */ p { position: relative; top: 20px; left: 30px; }
上述代碼將p元素相對于元素原來的位置進行定位,向下移動20像素,向左移動30像素。
/* z-index屬性控制元素的層次關系 */ /* 默認元素的z-index值為0,值越大,越會被放在上層 */ /* 當元素發生層疊時,z-index值更大的元素會遮擋在z-index值較小的元素之上 */ #element1 { z-index: 1; } #element2 { z-index: 2; }
上述代碼將id為element2的元素放在最上層,會遮擋id為element1的元素。
總之,CSS中的定位可以讓網頁在視覺上變得更加豐富多彩,增強了用戶使用網頁的體驗。
上一篇css樣式動效兼容
下一篇ajax接口數據調用案例