- 定位的含義是將元素放在指定的位置上，在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ì)脫離文檔流，常用的場(chǎng)景是子絕父相。
- sticky是粘性定位，是css新增的屬性值；可以說(shuō)是相對(duì)定位relative和固定定位fixed的結(jié)合；它主要用在對(duì)scroll事件的監(jiān)聽(tīng)上，簡(jiǎn)單說(shuō)在滑動(dòng)過(guò)程中，某個(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;定位的屬性決定了定位的偏移參照物
- 參照物問(wèn)題
- 靜態(tài)定位不會(huì)發(fā)生位置的調(diào)整所以不存在參照物的問(wèn)題
- 相對(duì)定位添加偏移屬性后，相對(duì)于自己原來(lái)的位置進(jìn)行位置調(diào)整
- 絕對(duì)定位：如果父元素及外側(cè)沒(méi)有任何已經(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)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。
京公網(wǎng)安備 11010802030320號(hào)