CSS 堆叠加的5条标准

日期:2021-03-14 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

最先确立几点在文中所必须用到的定义:

  1. 静态数据精准定位:position:static(为position特性的默认设置值)。
  2. 动态性精准定位:position:relative或position:absolute或position:fixed。
  3. 祖元素:随意包括该元素的元素。
  4. 父元素:立即包括该元素的祖元素。
  5. 同辈元素:有着相互的父元素的元素。

注:这些定义为作者自定,仅用于本文。

引入:

有关同辈元素是个十分重要的词,这里还必须详尽解释1下。

  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的的元素才可以叫“同辈元素”。

引入完毕

接下看来看这5条规律

规律1:同辈元素精准定位方法同样,且无z-index设定时,html靠后者居上。

规律2:同辈元素同为动态性精准定位时,且有z-index设定时,z-index值大者居上。

 

 猛点这里检测

规律3:同辈元素精准定位方法不一样时,动态性精准定位居上。

猛点这里检测

规律4:非同辈元素,随意1者及其祖元素不具有动态性合理布局时,html靠后者居上。

 

猛点这里检测

规律5:【关键】非同辈元素,随意1者或其祖元素有着动态性精准定位时,另外各有向上找寻动态性精准定位的祖元素,并各自从中拿出具有最高级别其他祖元素(或其自身)开展较为。 

  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融合拓展较为。

实际上前4点全是基本,仅有第5点较为难于了解,这里详尽解释1下:

在这个事例中,大家来较为div#a_inner5和div#b_inner4的堆叠关联。
到它们所相互有着的祖元素div#ab的下1级为止,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没法遮挡住,这些都属于出现异常状况,大伙儿能够自身检索1下有关文章内容。