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