<acronym id="5er3x"></acronym>
        <track id="5er3x"><strike id="5er3x"></strike></track>
        <track id="5er3x"><ruby id="5er3x"></ruby></track>

          <p id="5er3x"></p>
        1. <bdo id="5er3x"><strike id="5er3x"><b id="5er3x"></b></strike></bdo>
        2. <acronym id="5er3x"><label id="5er3x"></label></acronym>

          網頁設計中的絕對定位

          • 2019-03-11 16:09:13
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.iandjservices.com

          由于上一節中的大多數例子和例圖描述的都是絕對定位,網頁設計人員應該對絕對定位如何工作有了一定的了解。接下來主要介紹使用絕對定位時的具體細節。

          元素絕對定位時,會從文檔流中完全刪除。然后相對于其包含塊定位,其邊界根據偏移屬性(top、left等)放置,定位元素不會流入其他元素的內容,反之亦然。這說明,絕對定位元素可能覆蓋其他元素,或者被其他元素覆蓋(本章后面會看到,你可以影響這種覆蓋順序)。

          絕對定位元素的包含塊是最近的position值不為static的祖先元素。創作人員通常會選擇一個元素作為絕對定位元素的包含塊,將其position指定為relative而且沒有偏移:

          p.contain {position; relative;}

          考慮圖10-38中的例子,這是由以下樣式得到的結果:

          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>

          兩個段落中的b元素都是絕對定位。其區別在于各元素所用的包含塊。第一段中的b元素相對于初始包含塊定位,因為它的所有祖先元素的position都是static。不過,第二個段落設置為position: relative,所以它為其后代元素建立了一個包含塊。

          你可能已經注意到,在第二段中,定位元素覆蓋了段落中的部分文本內容。這在網站建設中是沒有辦法避免的,因為無法將b元素定位到段落之外(比如right或其他某個偏移屬性使用負值),也無法為段落指定一個足夠寬的內邊距來容納定位元素。另外,由于b元素有一個透明背景,所以會透過這個定位元素看到段落的文本。要避免這種情況,唯一的辦法就是為定位元素設置一個背景,或者將其從段落中完全去除。

          有時,網頁設計人員可能想確保body元素為其所有后代建立一個包含塊,而不是讓用戶代理選擇初始包含塊。這很簡單,只需如下聲明:

          body {position: relative,}

          在這樣一個文檔中,可以隨便放置絕對定位段落(如下),這會得到如圖10-39所示的結果:

          <P style="position: absolute; top: 0; rights 25%; left: 25%; bottom: auto; width: 50%; height: auco; background: silver;">...</p>

          圖10-39:定位一個元素,其包含塊為根元素

          現在段落定位在文檔的最前面,其寬度是文檔寬度的一半,并會覆蓋前面的幾個元素。

          要強調重要的一點:元素絕對定位時,還會為其后代元素建立一個包含塊。例如,可以將一個元素絕對定位,然后將它的一個子元素絕對定位,如圖10-40所示,這是使用以下樣式和基本標記生成的:

          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

          圖10-40:絕對定位元素建立包含塊

          網頁設計人員要記住,如果文檔可滾動,定位元素會隨著它滾動。只要絕對定位元素不是固定定位元素的后代,情況都是如此。其原因是元素最終會相對于正常流的某一部分定位。例如,如果將一個表絕對定位,其包含塊是初始包含塊,那么這個表就會隨文檔滾動,因為初始包含塊是正常流的一部分。類似地,即使建立一個嵌套4層的絕對定位元素,“最外層”元素總是會相對于初始包含塊定位?因此,它會隨著初始包含塊滾動,而其所有后代元素也會隨之滾動。

          注意:如果設計人員想將元素定位為相對于視窗放置,而不隨文檔的其余部分滾動,那么請繼續看下去。后面關于固定定位的一節將講解怎么做。

          當前文章標題:網頁設計中的絕對定位

          當前URL:http://www.iandjservices.com/news/wzzz/absolute-positioning.html

          上一篇:網頁設計中的元素可見性

          下一篇:網頁設計中的包含塊和絕對定位元素

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          久久中文字幕无码_中文字幕精品无码亚洲字2021_欧美国产日韩另类综合一区_欧美日韩亚洲乱国产综合AⅤ