1. 程式人生 > >absolute、relative,toggle()

absolute、relative,toggle()

data- ive -m note -a inline log relative art

測試代碼例如以下:
        <div>
            <div class="global">不應用樣式</div>
            <div class="global abs">位置為:absolute </div>
            <div class="global rel">位置為:relative</div>
        </div>
這兩者的差別: 1. absolute不占位置,relative是占位置的(往往absolute配置z-index使用) 技術分享
技術分享(abs的div被以下的rel的div覆蓋了,可使用z-index來顯示abs) 2. 默認情況下(即未指明top,left,right,bottom,僅僅設置了absolute),位置是依據父容器決定的 3. 結合top,left,right,bottom使用。absolute位置是依據瀏覽器窗體來定的,relative是依據自身基準線來定的 技術分享技術分享(為兩個div加上了top:10px的屬性。可見abs【竄上去了】是依據窗體來決定的。而rel是依據自身基準線決定的) 4. 在結合top、bottom、right、left等屬性時,假設想absolute(絕對定位)能以父層做為定位基線的話,則在父層應用absolute或relativ屬性就能夠! 技術分享
技術分享(在父div加上了position:absolute,結果如圖。)
從圖大概能夠看出個所以然來,可是詳細情況還是須要調試的。
另外對一個位置做顯示隱藏能夠使用$(obj).toggle(),來切換隱藏和顯示

absolute、relative,toggle()