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

時間 2019-11-10

原文原文鏈接

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

Just Try

首先，給出代碼：

html部分html

<p>let&apos;s begin.</p>
<div id="one">one
    <div id="two">two
        <div id="three">three
            <div id="four">four</div>
            <div id="five">five</div>
        </div>
    </div>
</div>
<p>hello world&excl;</p>

css部分chrome

#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就會被這個最近的祖先類元素「捕獲」。摟到懷裏唉，掩面&羞澀。spa

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

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

可是！前面幾部都是常規套路，若是「不走尋常路」（廣告位招租）呢？code

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

此時，four已經「一隻腳跨出」了three的「勢力範圍」。
css代碼以下htm

#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屬性來決定了。