- 定位的含義是將元素放在指定的位置上，在css中特指position屬性，他一共有5種屬性值，分別是：
- static靜態(tài)定位，是元素自帶的默認的定位方式。
- relative是相對定位，他是基于元素本身的位置進行定位的，不會脫離文檔流。
- fixed是固定定位是基于瀏覽器窗口進行定位的，會脫離文檔流。
- absolute是絕對定位，是基于最近的被設(shè)置了非靜態(tài)定位的上級元素進行定位的，他會脫離文檔流，常用的場景是子絕父相。
- sticky是粘性定位，是css新增的屬性值；可以說是相對定位relative和固定定位fixed的結(jié)合；它主要用在對scroll事件的監(jiān)聽上，簡單說在滑動過程中，某個元素距離其父元素的距離達到 sticky 粘性定位 要求時;position:sticky 這時的效果就相對于 fixed 定位，固定到適當?shù)奈恢谩?/p>
- 使用定位的時候如果需要元素進行位置的調(diào)整需要配合偏移屬性進行實現(xiàn)對應(yīng)的效果。偏移屬性有四個：top;right;bottom;left;定位的屬性決定了定位的偏移參照物
- 參照物問題
- 靜態(tài)定位不會發(fā)生位置的調(diào)整所以不存在參照物的問題
- 相對定位添加偏移屬性后，相對于自己原來的位置進行位置調(diào)整
- 絕對定位：如果父元素及外側(cè)沒有任何已經(jīng)定位的元素，則參照瀏覽器屏幕左上角(body左上角)進行位置的調(diào)整;如果父元素或者是就近的父級元素有定位則相對于就進行元素的左上角進行位置的調(diào)整;絕對定位的參照物就是所謂的包含塊的意思
- 固定定位：參照物是瀏覽器可視窗口位置的左上角進行位置調(diào)整，不會受到滾動條的滾動而影響
- 粘性定位：粘性定位參照物在實現(xiàn)固定吸頂效果的時候參照物與固定定位一樣
更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴謹，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。
京公網(wǎng)安備 11010802030320號