1. 程式人生 > >呆呆鍵盤手11.14號學到的定位-實現滾動門效果

呆呆鍵盤手11.14號學到的定位-實現滾動門效果

定位:
1、靜態定位--static;按照標準文件流進行佈局;

2、相對定位--relative;相對自身;以自身的坐上角(座標點)為參考;會保留原來的位置不被其他元素侵佔;

3、絕對定位--absolute;參考的是頁面的左上角;絕對定位位置不會被保留;
如果父級有定位,則參考父級的座標點;如果父級沒有定位,則會一級一級向上查詢,直到html標籤,中途有定位就會參照這個定位元素的座標點;

4、固定定位--fixed;相對於瀏覽器視窗的左上角;

 

實現效果

滾動門效果:

類似文字氣泡效果

這種方法需要三張圖

下面這種方法經過改進只需要兩張圖

上面是效果圖 圖上邊的黑線是網頁的位址列的線 截圖沒搞好截上去的