【CSS學(xué)習(xí)筆記】絕對(duì)定位的父類參照物的確定

cooxer 發(fā)布于2019-08-28 18:28 / 886人閱讀

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

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

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%;
}

顯示如下：

第一步，給標(biāo)記為four的div設(shè)置絕對(duì)定位

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

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

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

小結(jié)：這次four被限制到one的邊框內(nèi)了，而且寬高和top、right都自適應(yīng)到了以one的尺寸為基準(zhǔn)大小。所以說(shuō)這個(gè)時(shí)候，one成了four絕對(duì)定位時(shí)的祖先元素參照物。

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

小結(jié)：唉，這次four卻被two“擒獲”了唉，怎么回事？沒(méi)錯(cuò)，four做絕對(duì)定位的祖先參照物，是設(shè)置了相對(duì)定位且離four最近的那個(gè)祖先類元素。跟four最有“血緣關(guān)系”，four就會(huì)被這個(gè)最近的祖先類元素“捕獲”。摟到懷里唉，掩面&羞澀。

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

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

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

第五步，在第四步的基礎(chǔ)上，將four的css規(guī)則中right的屬性值改為負(fù)值呢？會(huì)有什么效果？

此時(shí)，four已經(jīng)“一只腳跨出”了three的“勢(shì)力范圍”。
css代碼如下

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

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

看完以后學(xué)到了啥

哦，似乎只是知道了一個(gè)元素要設(shè)置絕對(duì)定位必須首先確定離它最近的、設(shè)置了相對(duì)定位的祖先元素作為參照物，然后就可以“背上行囊來(lái)一次說(shuō)走就走的旅行了”（扇臉），應(yīng)該是可以進(jìn)行相對(duì)于參照物的位移了。

嘮叨

至于為何要用前后的兩個(gè)p元素和five，他們也都是作為我們實(shí)驗(yàn)的對(duì)照組啊。這里只用了對(duì)W3C標(biāo)準(zhǔn)支持得好的chrome內(nèi)核的，360極速進(jìn)行測(cè)試，其他瀏覽器下是什么測(cè)試情況有待考察。
此文本是，個(gè)人學(xué)習(xí)實(shí)踐結(jié)果，作為學(xué)習(xí)筆記加深印象。其他初學(xué)者也許亦有些微幫助。
至此。

軟件與環(huán)境

Windows 7 ultimate 64bit；

sublime text 3 + liveStyle；

360 chrome（內(nèi)核版本45.0.2454.101），應(yīng)該不是不很舊吧。