麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 網站 > 網頁設計 > 正文

網頁布局教程:層疊加的5條原則

2024-08-30 08:36:49
字體:
來源:轉載
供稿:網友

首先明確幾點在文中所需要用到的概念:

  1. 靜態定位:position:static(為position屬性的默認值)。
  2. 動態定位:position:relative或position:absolute或position:fixed。
  3. 祖元素:任意包含該元素的元素。
  4. 父元素:直接包含該元素的祖元素。
  5. 同輩元素:擁有共同的父元素的元素。

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

引用:

關于同輩元素是個非常關鍵的詞,這里還需要詳細解釋一下。

  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>

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

引用結束

接下來看看這五條法則

法則一:同輩元素定位方式相同,且無z-index設置時,html靠后者居上。

法則二:同輩元素同為動態定位時,且有z-index設置時,z-index值大者居上。

 

 猛點這里測試

法則三:同輩元素定位方式不同時,動態定位居上。

猛點這里測試

法則四:非同輩元素,任意一者及其祖元素不具備動態布局時,html靠后者居上。

 

猛點這里測試

法則五:【重要】非同輩元素,任意一者或其祖元素擁有動態定位時,同時各自向上尋找動態定位的祖元素,并分別從中拿出具備最高級別的祖元素(或其本身)進行比較。 

  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結合擴展比較。

其實前四點都是基礎,只有第五點比較難于理解,這里詳細解釋一下:

在這個例子中,我們來比較div#a_inner5和div#b_inner4的層疊關系。
到它們所共同擁有的祖元素div#ab的下一級為止,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。
然后分析它們的祖元素中具有動態定位的:div#a_inner5的祖元素中含有動態定位的元素有:div#a,div#a_inner3;div#b_inner4的祖元素中含有動態定位的元素有:div#b_inner3。
然后再拿出最高級進行比較:div#a > #div#b_inner3。

父元素居下,子元素也可以居上的情況,則是利用非同輩元素在祖元素具備動態布局時,其比較已經與position:static無關,而其祖元素卻可以通過html的位置來進行比較。

引用結束

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 国产韩国精品一区二区三区久久 | 午夜视频国产 | 韩国一大片a毛片 | 欧美成人一区二区三区 | 亚洲综合91 | 国产精品999在线 | 国产高清美女一级毛片久久 | 激情网站免费观看 | 久久网国产精品 | 精品一区二区三区在线观看视频 | 一级黄色毛片a | 亚洲精中文字幕二区三区 | 天堂福利电影 | 特黄一级小说 | 日本在线视频免费观看 | 草久在线 | 在线观看中文字幕国产 | 亚洲午夜在线观看 | 欧美成年人视频在线观看 | 激情午夜天| 欧美 亚洲 激情 | 国产超碰人人爽人人做人人爱 | 精品一区二区免费 | 成人国产免费观看 | 成人一级视频 | www.99re1.com| 人人舔人人舔 | 欧美日韩在线中文字幕 | 国产午夜亚洲精品午夜鲁丝片 | 日韩视频一区 | 亚洲最黄视频 | 国产成人高清成人av片在线看 | 国产精品自拍啪啪 | 国产一级毛片视频在线! | 最新黄色电影网站 | 久久精品久| 原来神马影院手机版免费 | 97久色| 九九热精品在线视频 | 国产精品久久久久久久成人午夜 | 永久免费不卡在线观看黄网站 |