亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS 層疊加的5條原則

  發(fā)布時(shí)間：2009-08-29 21:26:36   作者：佚名   我要評(píng)論
CSS網(wǎng)頁(yè)布局教程:層疊加的5條原則.

首先明確幾點(diǎn)在文中所需要用到的概念：

  1. 靜態(tài)定位：position:static（為position屬性的默認(rèn)值）。
  2. 動(dòng)態(tài)定位：position:relative或position:absolute或position:fixed。
  3. 祖元素：任意包含該元素的元素。
  4. 父元素：直接包含該元素的祖元素。
  5. 同輩元素：擁有共同的父元素的元素。

注：這些概念為作者自定義，僅用于本文。

引用:

關(guān)于同輩元素是個(gè)非常關(guān)鍵的詞，這里還需要詳細(xì)解釋一下。

  1. <div>
  2.     <div></div>
  3.     <div id="a"></div>
  4.     <div></div>
  5.     <div></div>
  6.     <div></div>
  7.     <div></div>
  8. </div>
  9. <div id="f">
  10.     <div></div>
  11.     <div id="b"></div>
  12.     <div id="c"></div>
  13.     <div></div>
  14.     <div></div>
  15.     <div></div>
  16. </div>

在這個(gè)例子中，div#a與div#b并不是“同輩元素”，只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫“同輩元素”。

引用結(jié)束

接下來看看這五條法則：

法則一：同輩元素定位方式相同，且無z-index設(shè)置時(shí)，html靠后者居上。

法則二：同輩元素同為動(dòng)態(tài)定位時(shí)，且有z-index設(shè)置時(shí)，z-index值大者居上。

 

 猛點(diǎn)這里測(cè)試

法則三：同輩元素定位方式不同時(shí)，動(dòng)態(tài)定位居上。

猛點(diǎn)這里測(cè)試

法則四：非同輩元素，任意一者及其祖元素不具備動(dòng)態(tài)布局時(shí)，html靠后者居上。

 

猛點(diǎn)這里測(cè)試

法則五：【重要】非同輩元素，任意一者或其祖元素?fù)碛袆?dòng)態(tài)定位時(shí)，同時(shí)各自向上尋找動(dòng)態(tài)定位的祖元素，并分別從中拿出具備最高級(jí)別的祖元素（或其本身）進(jìn)行比較。 

  1. <div id="ab" style="position:absolute;">
  2.     <div id="a" style="position:relative; z-index:100;">
  3.         <div id="a_inner1">
  4.             <div id="a_inner2">
  5.                 <div id="a_inner3" style="position:relative; z-index:98;">
  6.                     <div id="a_inner4">
  7.                         <div id="a_inner5">
  8.                         </div>
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>
  14.     <div id="b">
  15.         <div id="b_inner1">
  16.             <div id="b_inner2">
  17.                 <div id="b_inner3" style="position:relative; z-index:99;">
  18.                     <div id="b_inner4">
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </div>

 

情況1：子元素的z-index無論多大，父元素大者居上。

情況2：父元素居下，子元素也可以居上。

情況1、情況2結(jié)合擴(kuò)展比較。

其實(shí)前四點(diǎn)都是基礎(chǔ)，只有第五點(diǎn)比較難于理解，這里詳細(xì)解釋一下：

在這個(gè)例子中，我們來比較div#a_inner5和div#b_inner4的層疊關(guān)系。
到它們所共同擁有的祖元素div#ab的下一級(jí)為止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
然后分析它們的祖元素中具有動(dòng)態(tài)定位的：div#a_inner5的祖元素中含有動(dòng)態(tài)定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有動(dòng)態(tài)定位的元素有：div#b_inner3。
然后再拿出最高級(jí)進(jìn)行比較：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情況，則是利用非同輩元素在祖元素具備動(dòng)態(tài)布局時(shí)，其比較已經(jīng)與position:static無關(guān)，而其祖元素卻可以通過html的位置來進(jìn)行比較。

引用結(jié)束

當(dāng)然，有時(shí)候還存在特例，比如flash、比如ie6中的select無法遮住，這些都屬于異常情況，大家可以自己搜索一下相關(guān)文章。

相關(guān)文章

  • DIV重疊 CSS讓DIV層疊 兩個(gè)DIV或多個(gè)DIV順序重疊加

    這篇文章主要為大家介紹了讓DIV重疊并按想要順序重疊需要CSS來實(shí)現(xiàn)，即CSS絕對(duì)定位進(jìn)行實(shí)現(xiàn),需要的朋友可以參考下
    2014-11-04

  • HTML5 層的疊加的實(shí)現(xiàn)

    這篇文章主要介紹了HTML5 層的疊加的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07

最新評(píng)論