網(wǎng)站建設(shè)中元素絕對(duì)定位時(shí),會(huì)從文檔流中完全刪除。然后相對(duì)于其包含塊定位,其邊界根據(jù)偏移屬性(top、left等)放置,定位元素不會(huì)流入其他元素的內(nèi)容,反之亦然。這說(shuō)明,絕對(duì)定位元素可能覆蓋其他元素,或者被其他元素覆蓋(本章后面會(huì)看到,你可以影響這種覆蓋順序)。
絕對(duì)定位元素的包含塊是最近的position值不為static的祖先元素。網(wǎng)頁(yè)設(shè)計(jì)人員通常會(huì)選擇一個(gè)元素作為絕對(duì)定位元素的包含塊,將其position指定為relative而且沒(méi)有偏移:
p.contain {position; relative;}
考慮圖10-38中的例子,這是由以下樣式得到的結(jié)果:
p {margin: 2em;}
p.contain {position: relative;}/* establish a containing block*/ b {position: absolute; top: auto; right: 0; bottom: 0; left: auto; width: 8em; height: 5em; border: 1px solid gray;}
<body>
<p>
This paragraph does <era>not</em> establish a containing block for any of its
descendant elements that are absolutely positioned. Therefore, the absolutely
positioned <b>boldface </b> element it contains will be positioned with respect to the initial containing block. .
<p Class="contain">
Thanks to 'position; relative', this paragraph establishes a containing block for any of its descendant elements that are absolutely positioned. Since there is such an element——<em>that is to say,<b>a boldfaced element
that is absolutely positioned,</b> placed with respect to its containing block (the paragraph)</em>, it will appear within the element box generated by the paragraph.
</p>
</body>
兩個(gè)段落中的b元素都是絕對(duì)定位。其區(qū)別在于各元素所用的包含塊。第一段中的b元素相對(duì)于初始包含塊定位,因?yàn)樗乃凶嫦仍氐膒osition都是static。不過(guò),第二個(gè)段落設(shè)置為position: relative,所以它為其后代元素建立了一個(gè)包含塊。
網(wǎng)頁(yè)設(shè)計(jì)人員可能已經(jīng)注意到,在第二段中,定位元素覆蓋了段落中的部分文本內(nèi)容。這是沒(méi)有辦法避免的,因?yàn)闊o(wú)法將b元素定位到段落之外(比如right或其他某個(gè)偏移屬性使用負(fù)值),也無(wú)法為段落指定一個(gè)足夠?qū)挼膬?nèi)邊距來(lái)容納定位元素。另外,由于b元素有一個(gè)透明背景,所以會(huì)透過(guò)這個(gè)定位元素看到段落的文本。要避免這種情況,唯一的辦法就是為定位元素設(shè)置一個(gè)背景,或者將其從段落中完全去除。
有時(shí),網(wǎng)頁(yè)設(shè)計(jì)人員可能想確保body元素為其所有后代建立一個(gè)包含塊,而不是讓用戶代理選擇初始包含塊。這很簡(jiǎn)單,只需如下聲明:
body {position: relative,}
在這樣一個(gè)文檔中,可以隨便放置絕對(duì)定位段落(如下),這會(huì)得到如圖10-39所示的結(jié)果:
<P style="position: absolute; top: 0; rights 25%; left: 25%; bottom: auto; width: 50%; height: auco; background: silver;">...</p>
現(xiàn)在段落定位在文檔的最前面,其寬度是文檔寬度的一半,并會(huì)覆蓋前面的幾個(gè)元素。
要強(qiáng)調(diào)重要的一點(diǎn):元素絕對(duì)定位時(shí),還會(huì)為其后代元素建立一個(gè)包含塊。例如,可以將一個(gè)元素絕對(duì)定位,然后將它的一個(gè)子元素絕對(duì)定位,如圖10-40所示,這是使用以下樣式和基本標(biāo)記生成的:
div {position: relative; width: 100%; height: l0em;
border: 1px solid; background:#EEE;}
div.a {position: absolute; top: 0; right: 0; width: 15em; height: 100%; margin-left: auto; background:#CCC;}
div.b {position: absolute; bottom: 0; left: 0; width: l0em; height: 50%; margin-top: auto; background:#AAA;}
<div>
<div class="a">absolutely positioned element A
<div cl-ass="b'>abso:Lutely positioned element B</div>
</div>
containing block
網(wǎng)頁(yè)設(shè)計(jì)要記住,如果文檔可滾動(dòng),定位元素會(huì)隨著它滾動(dòng)。只要絕對(duì)定位元素不是固定定位元素的后代,情況都是如此。其原因是元素最終會(huì)相對(duì)于正常流的某一部分定位。例如,如果將一個(gè)表絕對(duì)定位,其包含塊是初始包含塊,那么這個(gè)表就會(huì)隨文檔滾動(dòng),因?yàn)槌跏及瑝K是正常流的一部分。類似地,即使建立一個(gè)嵌套4層的絕對(duì)定位元素,“最外層”元素總是會(huì)相對(duì)于初始包含塊定位?因此,它會(huì)隨著初始包含塊滾動(dòng),而其所有后代元素也會(huì)隨之滾動(dòng)。
注意:如果網(wǎng)頁(yè)設(shè)計(jì)人員想將元素定位為相對(duì)于視窗放置,而不隨文檔的其余部分滾動(dòng),那么請(qǐng)繼續(xù)看下去。后面關(guān)于固定定位的一節(jié)將告訴你怎么做。
當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的包含塊和絕對(duì)定位元素
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/absolute-elements.html