新聞中心
這篇“CSS如何實(shí)現(xiàn)子元素相對于父元素固定定位”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要參考一下,對于“CSS如何實(shí)現(xiàn)子元素相對于父元素固定定位”,小編整理了以下知識點(diǎn),請大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進(jìn)入主題吧。
為營口等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及營口網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、營口網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
基本概念
絕對定位(absolute):設(shè)置為絕對定位的元素框從文檔流完全刪除,并相對于其包含塊定位,包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉,就好像該元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
https://www.w3school.com.cn/css/css_positioning_absolute.asp
相對定位(relative):設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所占的空間仍保留。
問題分析
絕對定位的元素的位置相對于最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那么它的位置相對于最初的包含塊。
對于定位的主要問題是要記住每種定位的意義。所以,現(xiàn)在讓我們復(fù)習(xí)一下學(xué)過的知識吧:相對定位是“相對于”元素在文檔中的初始位置,而絕對定位是“相對于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相對于”最初的包含塊。
注釋:根據(jù)用戶代理的不同,最初的包含塊可能是畫布或 HTML 元素。
提示:因?yàn)榻^對定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其它元素??梢酝ㄟ^設(shè)置 z-index 屬性來控制這些框的堆放次序。
解決方案