在網頁設計中,經常會用到固定定位(fixed positioning),它可以使元素在頁面中固定不動。在CSS中,固定定位是通過設置一個特殊的CSS屬性—— position: fixed 來實現的。當我們使用這個屬性時,元素會被固定在相對于窗口的位置上,不會跟隨頁面滾動。
position: fixed; top: 0; left: 0;
然而,使用固定定位時,會出現一個問題,那就是會造成頁面中的其它元素偏移,即被當前元素所覆蓋。如果我們的固定定位元素非常大或者在頁面的頂部或底部,就會導致下面的元素被覆蓋,從而影響頁面的使用效果。
為了避免這種情況出現,我們可以使用CSS的占位符(Placeholder)來解決。占位符,可以理解為一個空元素,用來占據相應元素的空間,從而避免其它元素被當前元素所覆蓋。
.placeholder { width: 100%; height: 100px; /*和固定定位元素高度一致*/ }
使用占位符的原理非常簡單,在固定定位元素的上面或下面加入一個空元素,通過設置相應的CSS屬性,讓其占據當前元素的空間即可。在這里需要注意的是,占位符的高度應該與當前固定定位元素的高度一致,以達到最好的視覺效果。
總之,固定定位是在網頁設計中非常實用的一個功能,可以為設計帶來非常大的便利。而使用占位符,則可以讓頁面再次達到既美觀,又易用的效果。
上一篇css ff hack