本篇內容主要講解“HTML子絕父相實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML子絕父相實例分析”吧!

公司主營業務：成都做網站、網站建設、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。創新互聯建站是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創新互聯建站推出遜克免費做網站回饋大家。

一、子絕父相

1.只使用相對定位，對圖片的位置進行精準定位。

    

    

    







    
拍賣金融

    
美妝館

    
京東超市

    


        全球購

    

    
閃購

    
團購

    
拍賣

    

這種方式的的缺點：可以看到雖然利用相對定位進行了數據調節來達到讓圖片定位的效果，但是由于相對定位是在標準流的基礎上進行調節，所以原來圖片的位置（也就是全球購后面的那塊區域）依然是被占用著的。

2.下面只使用絕對定位來進行試驗。

ul li img{

            position:absolute;

            left: 900px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

?這種方式的缺點：上次連載說到，絕對定位會以首屏來進行定位，因此當改變網頁大小的時候，將會造成變形，定位到了?不合理的地方。

3.因此要同時運用絕對定位和相對定位進行編排才最合理

 

        ul li:nth-of-type(4){

            /*這里復習了同類標簽選擇第幾個進行設置它的樣式*/

            background-color: blue;

            position:relative;

        }

        ul li img{

            /*介紹一個方法：子絕父相，即子元素使用絕對定位，父元素使用相對定位*/

            position:absolute;

            left: 41px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

到此，相信大家對“HTML子絕父相實例分析”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！