在CSS中,人物按在不同的位置可以通過position屬性來控制。
position屬性共有四個取值:static、relative、absolute和fixed。
下面我們來逐一介紹:
/* static */ p { position: static; /* 默認取值 */ } /* relative */ p { position: relative; top: 20px; left: 50px; } /* absolute */ p { position: absolute; top: 0; right: 0; } /* fixed */ p { position: fixed; bottom: 0; left: 0; }
以上代碼演示了如何通過不同的取值來實現人物按在頁面不同的位置。其中,static為默認取值,表示元素處于文檔流中的原有位置不變;relative表示元素按照其原有位置上下左右調整一定距離;absolute表示元素按照相對于最近的已定位父元素的位置調整,若沒有已定位父元素則相對于文檔定位;fixed表示元素始終按照相對于瀏覽器窗口的固定位置。
通過設置不同的position值,我們可以使人物在頁面上按照自己的意愿進行布局。需要注意的是,使用absolute或fixed屬性,元素的父元素需要設置為relative或fixed,否則元素的定位可能出現問題。