深层次分析CSS中z

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

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

数次在新项目中遇到html网页页面元素的非希望重合不正确,大部分還是position精准定位状况下z-index的难题。实际上每次处理相近难题思路大概全是1样的,归根结底還是对z-index的了解较为模糊不清,能够处理难题却不大掌握其缘故,致使反复错误......因而决策把重合难题搞清下,把z-index理顺下。

历经1番搜索比照实践活动了解,下面就从元素重合的情况基本常识及将会缘故说起,浅谈下position精准定位元素的z-index次序。总结下我现阶段的了解,期待也能对遇到过相近难题有一样疑虑的你有1点协助或启迪。

元素部位重合的情况基本常识

(x)html文本文档中的元素默认设置处在一般流(normal flow)中,也便是说其次序由元素在文本文档中的前后部位决策,此时1般不容易造成重合(但特定负边距将会造成重合)。当大家用css为某个元素特定float波动或position精准定位后,元素的精准定位可能依状况产生以下更改:

1. 特定float值left/right

行内元素也会隐变形成块元素,元素会摆脱文本文档的一般流,向左或右波动,直至其外边沿碰到包括框或另外一个波动框。

2. 特定position值relative

能够相对其在一般流中的部位偏位,本来所占的室内空间仍保存。

3. 特定position值absolute

行内元素也会隐变形成块元素,元素会摆脱文本文档的一般流,相对近期的已精准定位先祖元素偏位,假如元素沒有已精准定位的先祖元素,那末它的部位相对最开始的包括块偏位。

4. 特定position值fixed

元素会摆脱文本文档的一般流,相对访问器对话框偏位,固定不动在访问器的某个部位。

以上4种状况下,文本文档中的元素都将将会被波动/精准定位元素遮盖造成重合。

元素部位重合的将会缘故

1. 负边距/float波动

margin为负值时元素会依参照线向外偏位。margin-left/margin-top的参照线为左侧的元素/上面的元素(如无弟兄元素则为父元素的左里侧/上里侧),margin-right和margin-bottom的参照线为元素自身的border右边/border下侧。1般能够运用负边距来就行合理布局,但沒有测算好的话便可能导致元素重合。层叠次序由元素在文本文档中的前后部位决策,后出現的会在上面。

波动元素会摆脱文本文档的一般流,有将会遮盖或遮挡掉文本文档中的元素。

2. position的relative/absolute/fixed精准定位

当为元素设定position值为relative/absolute/fixed后,元素产生的偏位将会造成重合,且z-index特性被激活。z-index值能够操纵精准定位元素在竖直于显示信息屏方位(Z 轴)上的层叠次序(stack order),值大的元素产生重合时会在值小的元素上面。

3. window对话框元素引起的重合

访问器分析网页页面时,先分辨元素的种类:对话框元素优于非对话框元素显示信息(也便是对话框元素会遮盖在其它非对话框元素之上),同为非对话框种类才可以在激活z-index特性操纵层叠次序。

Flash元素属于window对话框元素

因此假如网页页面上flash元素和别的元素产生重合,必须先将flash嵌入的wmode特性的window(对话框,默认设置的会导致上面所说的难题)改成非对话框方式:opaque(非对话框不全透明)或 transparent(非对话框全透明)。

ie6下select属于window种类控制

同理,它也造成对话框元素的遮挡难题。处理方式应用iframe(基本原理:ie6下一般元素没法遮盖select,iframe能够遮盖select,一般元素能够遮盖iframe)/用div仿真模拟完成select的实际效果。我1般会为被select遮挡的div在內部追加(appendChild)1个空的子iframe,设定position:absolute摆脱文本文档流室内空间、width:100%;height:100%;遮盖全部父div、z-index:⑴;保证值要小于父div的z-index值让父div遮盖显示信息在iframe上面,依靠这个iframe来遮盖select。

浅说position精准定位及z-index应用

应用前提条件

z-index只能在position特性值为relative或absolute或fixed的元素上合理。

基础基本原理

z-index值能够操纵精准定位元素在竖直于显示信息屏方位(Z 轴)上的层叠次序(stack order),值大的元素产生重合时会在值小的元素上面。

应用的相对性性

z-index值只决策同1父元素中的同级子元素的层叠次序。父元素的z-index值(假如有)为子元素界定了层叠次序(css版层叠“拼爹”)。向上追溯找不到含有z-index值的父元素的状况下,则能够视作随意的z-index元素,它能够与父元素的同级弟兄精准定位元素或别的随意的精准定位元向来较为z-index的值,决策其层叠次序。同级元素的z-index值假如同样,则层叠次序由元素在文本文档中的前后部位决策,后出現的会在上面。

因此假如当你发现1个z-index值较大的元素被值较小的元素遮挡了,请先查验它们之间的dom结点关联,大多数是由于其父结点含有激活并设定了z-index值的position精准定位元素。

也由于这个相对性性,还会引起访问器主要表现不1致出現适配难题。缘故是ie6、7下面position值为非static的元素在未设定z-index值的状况下都会被暗含加上z-index:0,而Firefox/Chrome等当代访问器会遵照规范默认设置z-index:auto不容易造成值。

也有1点必须留意,负值的z-index也按照尺寸较为的基本原理,但1般来讲负值的z-index会被全透明的body遮盖致使点一下等恶性事件回应出現难题,请慎重应用。

图解分层显示信息                                                                         

  实际上大家常触碰到的z-index只是分层显示信息中的1个特性罢了,而了解z-index身后的基本原理本质上便是要了解分层显示信息基本原理。下面大家根据1个示例来了解1下分层显示信息涉及到的目标和特性(z-axis、(root) stacking context、box、stack level)和它们之间的关联。

HTML Markup

表明:

1. 在结构3D渲染树时会为element转化成对应的box,因此div#d1->d1:box,div#d2->d2:box,div#d3->d3:box,div#d4->d4:box,p#p1->p1:box。

2. 针对positioned box而言,若z-index特性值并不是0,则会建立1个新的stacking context,而且其子孙后代box将属于这个新stacking context。

3. 同1个stacking context的z-index才具备可比性,也便是说在探讨z-index时务必带表明是哪一个stacking context下的z-index。如示例般,尽管⑼999比10小,但因为d4:box和d1:box坐落于不一样的stacking context,因而没法分辨哪一个box更挨近客户。

堆叠标准                          

堆叠标准便是决策究竟哪一个box更挨近客户。

1. 前提条件:boxes属于同1个stacking context,而且z-index同样

      标准:依照box对应的element在文本文档树的次序,后者比前者更挨近客户(back-to-front)

CSS Code拷贝內容到剪贴板
  1. <!-- 两种状况下,d2均排在d1的后边,因而d2在z-axis上坐落于d1的上面 -->   
  2. <div id="d1">   
  3.   <div id="d2">   
  4.   </div>   
  5. </div>   
  6.   
  7. <div id="d1">   
  8. </div>   
  9. <div id="d2">   
  10. </div>  

2. 前提条件:boxes属于同1个stacking context,而且z-index不一样

标准:z-index特性值大的box更挨近客户

CSS Code拷贝內容到剪贴板
  1. <!-- d1的z-index为12,而d2的z-index为0,因此d1在d2的上面 -->   
  2. <div id="d1" style="position:relative;z-index: 12;">   
  3. </div>   
  4. <div id="d2" style="z-index: 0;margin-top:⑵0px;">   
  5. </div>  

3. 前提条件:boxes属于不一样的stacking context,而且stacking contexts沒有祖孙/父子关联

      标准:boxes会向上沿着父box开展检索,直至父boxes属于同1个stacking context为止,随后较为父boxes的z-index特性值,z-index特性值大的box更挨近客户。

CSS Code拷贝內容到剪贴板
  1. <div>   
  2.   <div id="d1" style="position:relative; z-index:10;">   
  3.     <div id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3</div>    
  4.   </div>   
  5.   <div id="d2" style="background:blue; width:50px; height:50px; position:relative; top: ⑴20px; z-index:9;">d2</div>   
  6.   <div id="d3" style="background:green; width:50px; height:50px; position:relative; top: ⑻0px; position:relative; z-index:11;">d3</div>   
  7. </div>  

4. 前提条件:boxes属于不一样的stacking context,而且stacking contexts为祖孙/父子关联

      标准:属于子stacking context的box必然更挨近客户

CSS Code拷贝內容到剪贴板
  1. <div style="background:blue; width:100px; height:100px; position:relative; z-index:10;">   
  2.   <div style="background:red; width:50px; height:50px; position:relative; z-index:⑴0;"></div>   
  3. </div>  

z-index的功效                        

  唠叨1句:同1个stacking context的z-index才具备可比性,也便是说在探讨z-index时务必带表明是哪一个stacking context下的z-index。

  它有两个功效:1. 设定box在其隶属的stacking context下的stack level;

                      2. 当z-index特性值非0时,则在该box中建立1个新的stacking context,而该box的子孙后代box默认设置属于这个新stacking context。

  留意:z-index的默认设置值为auto,全自动取值为0。因而默认设置状况下不容易建立新的stacking context。

  z-index起效的阀门

    z-index特性值仅对positioned box起效,而non-positioned box的z-index始终为0。

    或许你会举出以下反例:

JavaScript Code拷贝內容到剪贴板
  1. <div id="d1" style="z-index:10;"></div>   
  2. <script type="text/javascript">   
  3.   console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 輸出10   
  4. </script>  

    但很抱歉的是,上面获得的是non-positioned element div#d1的z-index特性值,而并不是non-positioned box的z-index特性值。

    针对positioned element,它会将z-index授予给对应的positioned box,而non-positioned element则不容易。