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下有关文章内容。

上一篇：未知长宽元素在已知300px*300px的器皿中竖直垂直居 返回下一篇：没有了