【CSS學習筆記】絕對定位的父類參照物的確定

cooxer 發布于2019-08-28 18:28 / 879人閱讀

摘要：今天看定位的課程，了解到一個元素要設置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素。第三步，在第二步的基礎上給添加屬性聲明小結唉，這次卻被擒獲了唉，怎么回事沒錯，做絕對定位的祖先參照物，是設置了相對定位且離最近的那個祖先類元素。

今天看CSS定位的課程，了解到一個元素要設置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素html。
這個默認根元素已經明確，但是祖先類元素參照物如何確定呢？

Just Try 首先，給出代碼：

html部分

let's begin.

one

two

three

four

five

hello world!

css部分

#one {
    background-color: lime;
    outline: 2px dashed silver;
    width: 50%;
}
#two {
    background-color: yellow;
    outline: 2px dashed gray;
    width: 50%;
    height: 75%;
}
#three {
    background-color: orange;
    outline: 2px dashed blue;
    width: 50%;
    height: 75%;
}
#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
}
#five {
    background-color: lightblue;
    outline: 2px dashed red;
    width: 50%;
    height: 75%;
}

顯示如下：

第一步，給標記為four的div設置絕對定位

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: 5%;
    top: 5%;
}

小結：可以看到four（后面直接將標記的id名稱對應div元素）已經脫離原有的文檔流，在他的父類元素three中不占用位置了。而它的參考物似乎就是瀏覽器視窗本身，也就是html的html元素這個默認的根元素，你看，它離瀏覽器視窗頂部和右部的距離是不是差不多都是視窗高度的5%，而且它自身的寬度、高度不也是分別為瀏覽器視窗的寬高的對應50%和75%么。

第二步，給one添加position: relative;屬性聲明

小結：這次four被限制到one的邊框內了，而且寬高和top、right都自適應到了以one的尺寸為基準大小。所以說這個時候，one成了four絕對定位時的祖先元素參照物。

第三步，在第二步的基礎上給two添加position: relative;屬性聲明

小結：唉，這次four卻被two“擒獲”了唉，怎么回事？沒錯，four做絕對定位的祖先參照物，是設置了相對定位且離four最近的那個祖先類元素。跟four最有“血緣關系”，four就會被這個最近的祖先類元素“捕獲”。摟到懷里唉，掩面&羞澀。

第四步，測試一下第三步的結論，再給three添加position: relative;屬性聲明

小結：瞧！是不是？three是four的直接父元素，在one和two都已經設置position: relative;屬性聲明的前提下，three還是把four給捕獲了。

但是！前面幾部都是常規套路，如果“不走尋常路”（廣告位招租）呢？

第五步，在第四步的基礎上，將four的css規則中right的屬性值改為負值呢？會有什么效果？

此時，four已經“一只腳跨出”了three的“勢力范圍”。
css代碼如下

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: -25%;
    top: 5%;
}

小結：一個元素A要設置絕對定位，離它最近的、設置了相對定位的祖先類元素B，就會“捕獲”它。但是最終，作為后代元素的A也只是以B為參照物，也就是從B的位置“出發”，至于能去到哪里，則是由top/right/bottom/left屬性來決定了。

看完以后學到了啥

哦，似乎只是知道了一個元素要設置絕對定位必須首先確定離它最近的、設置了相對定位的祖先元素作為參照物，然后就可以“背上行囊來一次說走就走的旅行了”（扇臉），應該是可以進行相對于參照物的位移了。

嘮叨

至于為何要用前后的兩個p元素和five，他們也都是作為我們實驗的對照組啊。這里只用了對W3C標準支持得好的chrome內核的，360極速進行測試，其他瀏覽器下是什么測試情況有待考察。
此文本是，個人學習實踐結果，作為學習筆記加深印象。其他初學者也許亦有些微幫助。
至此。

軟件與環境

Windows 7 ultimate 64bit；

sublime text 3 + liveStyle；

360 chrome（內核版本45.0.2454.101），應該不是不很舊吧。

GPU云服務器云服務器 java的父類和子類中的絕對定位深度學習的確定相對定位-絕對定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111255.html

前端筆記之CSS（下）浮動&BFC&定位&Hack

摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS：　　樣式：　　布局：　　　　標準流(標準文檔流、普通文檔流)：盒子模型(width/height...

番茄西紅柿 2019-04-23 11:44 評論0 收藏0
學習筆記—CSS基礎

摘要：的聲明內聯樣式在元素內部在標簽上使用屬性進行聲明。此聲明只作用于當前標簽。擁有最高優先級。注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。元素的位置相對于瀏覽器窗口是固定位置。概念　　CSS 指層疊樣式表（Cascading Style Sheets），是一種標記語言，屬于瀏覽器解釋型語言，可以直接由瀏覽器執行，不需要編譯。　　HTM...

caspar 2019-04-23 11:41 評論0 收藏0
我所了解的CSS包含塊

摘要：根元素包含塊根元素的包含塊是一個矩形叫做初始化包含塊。如果屬性是的話，包含塊就是由組成的。示例二代碼在這里，這個標簽為默認的且它的父標簽的為，所以標簽的包含塊為標簽，通過我們的判斷規則一來確定。寫在前面，本文將同步發布于Blog、掘金、segmentfault、知乎等處，如果本文對你有幫助，記得為我得到我的個人技術博客項目給個star哦。指出錯誤觀念許多開發者認為一個元素的包含塊...

BenCHou 2019-08-30 15:54 評論0 收藏0
CSS布局模型

摘要：實現相對于父元素定位參照定位的元素相對參照元素進行定位相對定位元素css三種基本網頁布局模型：流動模型（Flow）、浮動模型（Float）、層模型（Layer）流動模型（默認狀態下的模型）特點： ????塊狀元素在所包含元素內自上而下按順序垂直延伸分布，內聯元素在所處的包含元素內從左到右水平分布 ? 浮動模型 ? 可以讓兩個塊狀元素并排顯示 ? ?float:left ? ?float:...

liangzai_cool 2019-04-23 13:09 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發現自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評論0 收藏0