htmlcss基础篇——DOM中关于脱离文档流的几种情况分析

2023年6月20日发(作者：)

htmlcss基础篇——DOM中关于脱离⽂档流的⼏种情况分析　　所谓的⽂档流，指的是元素排版布局过程中，元素会⾃动从左往右，从上往下的流式排列。并最终窗体⾃上⽽下分成⼀⾏⾏, 并在每⾏中按从左⾄右的顺序排放元素。脱离⽂档流即是元素打乱了这个排列，或是从排版中拿⾛。　　当前所知的脱离⽂档流的⽅式有两种：浮动和定位。 　　a.定位属性positon　　先看⼀下定位。看⼀段对定位各个字段的描述，有助于理解值absolute描述⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。fixed元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。⽣成相对定位的元素，相对于其正常位置进⾏定位。relativestaticinherit因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。规定应该从⽗元素继承 position 属性的值。　　position的值为absolute、fixed的元素脱离⽂档流，static、relative没有脱离⽂档流　　position定位测试例⼦（为了不影响定位效果，⽂字都放在了最后）

　　整体效果截图　　　　结论：　　定位不脱离⽂档流，设置left/top/right/bottom没有作⽤，对margin/padding敏感。　　【证据：#bigest定位left没有其作⽤】　　2.⽗⼦节点都是没有脱离⽂档的两种定位（static、relative）的外边距（margin）会合并，显⽰效果以最⼤的那个外边距为准。　　【证据：#bigest，#biger,#big,#normal都是⾮脱离⽂档的元素且是⽗⼦节点关系，他们的marginTop值分别为20px/30px/40px/50px。#bigest和#biger的外边距合并，合并后的top外边距为30px；然后#biger拿先前合并后的结果和#big外边距合并，合并后top的外边距为40px;最后#big拿先前合并的结果和#normal的外边距合并，合并结果为50px。所以最终合并的外边距为50px。显⽰效果如下如　　　　当然，这是在没有内边距影响的情况下。如果有内边距影响，那么⼦元素的外边距会基于⽗元素的内边距来偏移。如我们设置#big{padding-top: 10px;}属性后，#nomal的margin-top是在#big的padding-top开始偏移的,如图　　

　　说道这⾥对于外边距margin：块级元素的垂直相邻外边距会合并，⽽⾏内元素实际上不占上下外边距。⾏内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使⽤时要⼩⼼。例⼦：

　　效果，最终黄块与红块之间的空⽩间隙为50px。　　　　将#top50的css换成#top50{ top: 50px; margin-top: 50px;　　　　padding-bottom: 50px; height: 100px; width: 100px; background: #f00; display: inline; }　　效果为　　　　可见⾏内元素对定位top/right/bottom/left、宽⾼width/height、外边距margin不敏感，对边框和内边距敏感。

　　还有⼀点：脱离⽂档流的元素都是块级元素。#top50{ top: 50px; margin-top: 50px;　　　　padding-bottom: 50px; height: 100px; width: 100px; background: #f00; display: inline; }　　　　后⾯两种情况#top50都被作为块级元素来处理了，⽽⾮内联元素。

　　在使⽤脱离⽂档流的定位的时候最好使⽤ "left", "top", "right" 以及 "bottom" 属性对元素的位置进⾏规定。否则可能出现不良情况。还是先前的例⼦　　#top50{　　　 position:absolute; top: 50px; margin-top: 50px;　　　 padding-bottom: 50px; height: 100px; width: 100px; background: #f00; display: inline; }　　设置了top和没有设置top的效果分别如下　　

　　设置了top，top相对于body元素定位，可以预期。后⾯没有设置top,浏览器会将脱离⽂档流的块（包括外边距）按流式布局排列，给⼈感觉貌似没有脱离⽂档流，但是两个块之间的空⽩有60px⾼度，这种情况⾮我们预期。】　　　　te⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。因为static定位是⽆法使⽤left/top/right/bottom设置位置的，static定位的元素应当和他们的⽗节点的边重合（在不考虑其他因素的情况下，⽐如外边距margin）。如#middle的⽗节点#normal就是static定位的元素，再往上找到#big才是⾮static定位的，所以#middle会相对于#big来定位。　　　　所以上图#middle相对#big左侧的距离是10px。在看#middle的顶边距离#normal的顶边是50px,是#middle：margin-top:50px影响。但是这个外边距偏移是基于normal的还是big的？　　实验1：先前做过的实验拿来⽤，如我们设置#big{padding-top: 1px;}属性后，#nomal的margin-top是在#big的padding-top开始偏移的,如图　　　　上⾯这个实验结果看到#middle的margin-top是基于#normal的。　　实验2：如果我们再给#middle 添加⼀个定位样式top:20px;结果如下　　　　看到没，这个时候#middle的top和margin-top都是基于#big，⽽⾮#normal。

　　所以absolute定位结果分两种情况来考虑：　　第⼀种，元素的某条边没有设置定位属性（left/top/right/bottom）的时候(默认值为auto)，这⼀边就会将absolute块（包括外边距）按流式布局来排列（如实验1结果所⽰），当然这个流式布局就会受到内边距padding的影响了。　　第⼆种，元素的某条边设置了定位属性（left/top/right/bottom）的时候(默认值是auto)，这⼀边就会被作为脱离⽂档流的边来处理，会相对于 static 定位以外的第⼀个⽗元素（的边框）进⾏定位，如果这时候设置了外边距，那么这⼀边相对于基准元素的偏移=定位值（left/top/right/bottom）+ 外边距。效果如实验2所⽰。作为脱离⽂档流来处理的边是基于那个基准元素的边框来定位的，当然不受内边距padding的影响。　　 　　定位可以看成⼀种特殊的绝对定位，absolute的基准元素是 static 定位以外的第⼀个⽗元素，⽽fix的基准元素是浏览器窗⼝。absolute定位结果分两种情况对于fix来说同样适⽤。看下⾯的图：第⼀幅没有设置top,后⼀幅设置了top:10px。　　

　　5.因为absolute相对于 static 定位以外的第⼀个⽗元素进⾏定位,所以⼀般要对某个元素absolute定位，则设置其⽗元素为relative即可。避免⽆法预知的基准元素。

　　6.强烈建议脱离⽂档流的定位absolute的元素内部不要在其内部包含有脱离⽂档流的元素存在。举⼀个例⼦，某个iframe中内容会不断增⾼或缩⼩，但是iframe不能有⾃⼰的滚动条，需要同步增⾼或减少⽗窗⼝和iframe的⾼度使得滚动⽗窗⼝滚动条滚动显⽰iframe的内容。这个时候，需要计算iframe中body内容真实的⾼度（这个⾼度不能使⽤$(document).height()来获得，，获取的不⼀定是body内容的真实⾼度可能是窗⼝的⾼度），对于脱离⽂档流的元素需要⾃⼰计算⾼度，⽽脱离⽂档流的元素a中还包含脱离a的元素b，咋搞哦。所以才有这⾥的建议。　　　　7. 对使⽤absolute脱离⽂档流的的元素如果做到让absolute元素后⾯的元素⾃适应布局？⼀般使⽤margin定位后⾯的元素来处理。举个例⼦　　　　左边的灰块是绝对定位absolute元素，右边黄⾊部分⽂字⾃适应到绿⾊边框的右边⾃动换⾏。这个是怎么实现的看源码

　　#left绝对定位宽度是100，那么只要使#right margin-left: 110px;这样空出#left的显⽰空间即可。#right的⾃适应照常使⽤。

　　8. relative没有脱离⽂档流。如果原来不明⽩为什么，就有必要看这个例⼦。relative：相对定位，参造物是其本⾝，并不脱离⽂档流，不管你怎么移动，它原有的位置还是会留着。不仅如此，脱离⽂档流的元素相当于⾃⾝⽣成了⼀个新的⽂档流，⽗容器对其没有布局上的影响（最多是定位的影响）。但是relative却不是，⽗容器对其布局影响照旧。举例(还是上⾯的例⼦，我们把#right替换为如下)： #right{ margin-left: 110px; background: #ff0; position: relative; }　　　　效果依旧，⾃适应依然以绿⾊边框的⽗容器为边界。我们如果将#right换成span标签，#right依然以span内联标签的⽅式显⽰。　　如果我将#right换成 #right{ margin-left: 110px; background: #ff0; position: absolute; }　　　　上图效果图右边还有部分没有截完。可以看出⽗容器对#right已经⽆法限制其边界了。#right真正的是⾃成⼀家了。　　不过有⼀点：relative在堆叠优先级上和fixed、absolute⼀样，要⽐兄弟节点中staic节点要⾼。举例

　　　　虽然#right写的顺序在#left后⾯，但是#left依然堆叠在#right上⾯。可以动⼿试⼀下，relative、absolute、fixed等级是⼀样的，static⽐另外三个低⼀级。　　b. 浮动属性float　　float 属性定义元素在哪个⽅向浮动。以往这个属性总应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。如果浮动⾮替换元素，则要指定⼀个明确的宽度；否则，它们会尽可能地窄。　　注释：假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏，这个过程会持续到某⼀⾏拥有⾜够的空间为⽌。　　为什么说浮动元素是脱离⽂档流的。　　脱离⽂档流的元素有个标志：没有实际⾼度。⽐如例⼦ 　　　　#left没有把#panel给撑开，#panel的⾼度为0。　　对于浮动属性来说，位置属性（left/top/right/bottom）是没有⽤的。

　　但是在内部显⽰的时候，#left的兄弟节点会在#left占有的地盘之外显⽰。⽐如，我们新增#right,html代码变为

　　　　⽂字环绕#left。#panel被#right给撑开了。　　浮动有点像玩俄罗斯⽅块。向左浮动，⽅块从右往左滑过来，如果某⼀⾏空间不够（基于⽗容器的宽度），那么这个块会沿着最右边的块的下边沿⽔平划过来，最后看卡到哪⾥就停⽌。举例 　　　　#left4在第⼀⾏left3后⾯宽度不够，换⾏成第⼆⾏。在left2后⾯宽度不够，只能在left1后⾯。#right1⾃然是从第⼆⾏开始查找位置，很幸运第⼆⾏现在唯⼀的元素#left4右⾯空间⾜够，放置即可。#right2在第⼆⾏中没有⾜够的位置，换⾏成第三⾏，找到空余位置插⼊。　　可以看到互动元素之间连接的部分是没有空隙的。这是⼀个很好的特性，可以⽤来做排列，精确到1px。

　　浮动元素不占据⾼度，如果某个元素内部全是浮动元素，最后该元素也没有⾼度，如果想要⽗元素内的浮动元素占有原来的⾼度，在⽗元素内部最后⼀个元素加上css属性为clear：both的块状元素即可。如　　#panel{ width: 200px; border: green solid 1px; }　　

　　　　有时也会在⽗元素后⾯加，不过该⽗元素不会获取到⾼度，但是⽗元素的后⾯的兄弟节点会认为其占⽤了位置。实例

View Code　　 　　对于浮动与定位的位置优先级：　　(fixed == absolute) > float > relative > static。理解为同时设置了position:absolute和float:right。忽略float:right。 　　　　堆叠优先级：　　定位元素z-index>=0时为(fixed == absolute == relative) > static，z-index < 0时(fixed == absolute == relative) < static。理解为兄弟元素⼀个设置了position：relative,另⼀个设置了position:static，当relative元素z-index为>=0时，⽆论static元素设置多少都在relative下⾯。如果relative设置z-index<0,则论static取什么值relative都会在static下⾯。　　定位元素z-index>=0时(fixed == absolute == relative) > float，z-index < 0时(fixed == absolute == relative) < float。理解为兄弟元素⼀个设置了position：relative,另⼀个设置了float:left，当relative元素z-index为>=0时，⽆论float元素设置多少都在relative下⾯。如果relative设置z-index<0,则⽆论float的z-index设置多少relative都会在float下⾯。　　float > static始终成⽴。因为z-index只有在定位元素上才起作⽤，定位元素包括fixed、absolute、relative。　　fixed == absolute == relative，⽐较堆叠顺序直接⽐较z-index⼤⼩即可。

2023年6月20日发(作者：)

htmlcss基础篇——DOM中关于脱离⽂档流的⼏种情况分析　　所谓的⽂档流，指的是元素排版布局过程中，元素会⾃动从左往右，从上往下的流式排列。并最终窗体⾃上⽽下分成⼀⾏⾏, 并在每⾏中按从左⾄右的顺序排放元素。脱离⽂档流即是元素打乱了这个排列，或是从排版中拿⾛。　　当前所知的脱离⽂档流的⽅式有两种：浮动和定位。 　　a.定位属性positon　　先看⼀下定位。看⼀段对定位各个字段的描述，有助于理解值absolute描述⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。fixed元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。⽣成相对定位的元素，相对于其正常位置进⾏定位。relativestaticinherit因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。规定应该从⽗元素继承 position 属性的值。　　position的值为absolute、fixed的元素脱离⽂档流，static、relative没有脱离⽂档流　　position定位测试例⼦（为了不影响定位效果，⽂字都放在了最后）

　　整体效果截图　　　　结论：　　定位不脱离⽂档流，设置left/top/right/bottom没有作⽤，对margin/padding敏感。　　【证据：#bigest定位left没有其作⽤】　　2.⽗⼦节点都是没有脱离⽂档的两种定位（static、relative）的外边距（margin）会合并，显⽰效果以最⼤的那个外边距为准。　　【证据：#bigest，#biger,#big,#normal都是⾮脱离⽂档的元素且是⽗⼦节点关系，他们的marginTop值分别为20px/30px/40px/50px。#bigest和#biger的外边距合并，合并后的top外边距为30px；然后#biger拿先前合并后的结果和#big外边距合并，合并后top的外边距为40px;最后#big拿先前合并的结果和#normal的外边距合并，合并结果为50px。所以最终合并的外边距为50px。显⽰效果如下如　　　　当然，这是在没有内边距影响的情况下。如果有内边距影响，那么⼦元素的外边距会基于⽗元素的内边距来偏移。如我们设置#big{padding-top: 10px;}属性后，#nomal的margin-top是在#big的padding-top开始偏移的,如图　　

　　说道这⾥对于外边距margin：块级元素的垂直相邻外边距会合并，⽽⾏内元素实际上不占上下外边距。⾏内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使⽤时要⼩⼼。例⼦：

　　效果，最终黄块与红块之间的空⽩间隙为50px。　　　　将#top50的css换成#top50{ top: 50px; margin-top: 50px;　　　　padding-bottom: 50px; height: 100px; width: 100px; background: #f00; display: inline; }　　效果为　　　　可见⾏内元素对定位top/right/bottom/left、宽⾼width/height、外边距margin不敏感，对边框和内边距敏感。

　　还有⼀点：脱离⽂档流的元素都是块级元素。#top50{ top: 50px; margin-top: 50px;　　　　padding-bottom: 50px; height: 100px; width: 100px; background: #f00; display: inline; }　　　　后⾯两种情况#top50都被作为块级元素来处理了，⽽⾮内联元素。

　　在使⽤脱离⽂档流的定位的时候最好使⽤ "left", "top", "right" 以及 "bottom" 属性对元素的位置进⾏规定。否则可能出现不良情况。还是先前的例⼦　　#top50{　　　 position:absolute; top: 50px; margin-top: 50px;　　　 padding-bottom: 50px; height: 100px; width: 100px; background: #f00; display: inline; }　　设置了top和没有设置top的效果分别如下　　

　　设置了top，top相对于body元素定位，可以预期。后⾯没有设置top,浏览器会将脱离⽂档流的块（包括外边距）按流式布局排列，给⼈感觉貌似没有脱离⽂档流，但是两个块之间的空⽩有60px⾼度，这种情况⾮我们预期。】　　　　te⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。因为static定位是⽆法使⽤left/top/right/bottom设置位置的，static定位的元素应当和他们的⽗节点的边重合（在不考虑其他因素的情况下，⽐如外边距margin）。如#middle的⽗节点#normal就是static定位的元素，再往上找到#big才是⾮static定位的，所以#middle会相对于#big来定位。　　　　所以上图#middle相对#big左侧的距离是10px。在看#middle的顶边距离#normal的顶边是50px,是#middle：margin-top:50px影响。但是这个外边距偏移是基于normal的还是big的？　　实验1：先前做过的实验拿来⽤，如我们设置#big{padding-top: 1px;}属性后，#nomal的margin-top是在#big的padding-top开始偏移的,如图　　　　上⾯这个实验结果看到#middle的margin-top是基于#normal的。　　实验2：如果我们再给#middle 添加⼀个定位样式top:20px;结果如下　　　　看到没，这个时候#middle的top和margin-top都是基于#big，⽽⾮#normal。

　　所以absolute定位结果分两种情况来考虑：　　第⼀种，元素的某条边没有设置定位属性（left/top/right/bottom）的时候(默认值为auto)，这⼀边就会将absolute块（包括外边距）按流式布局来排列（如实验1结果所⽰），当然这个流式布局就会受到内边距padding的影响了。　　第⼆种，元素的某条边设置了定位属性（left/top/right/bottom）的时候(默认值是auto)，这⼀边就会被作为脱离⽂档流的边来处理，会相对于 static 定位以外的第⼀个⽗元素（的边框）进⾏定位，如果这时候设置了外边距，那么这⼀边相对于基准元素的偏移=定位值（left/top/right/bottom）+ 外边距。效果如实验2所⽰。作为脱离⽂档流来处理的边是基于那个基准元素的边框来定位的，当然不受内边距padding的影响。　　 　　定位可以看成⼀种特殊的绝对定位，absolute的基准元素是 static 定位以外的第⼀个⽗元素，⽽fix的基准元素是浏览器窗⼝。absolute定位结果分两种情况对于fix来说同样适⽤。看下⾯的图：第⼀幅没有设置top,后⼀幅设置了top:10px。　　

　　5.因为absolute相对于 static 定位以外的第⼀个⽗元素进⾏定位,所以⼀般要对某个元素absolute定位，则设置其⽗元素为relative即可。避免⽆法预知的基准元素。

　　6.强烈建议脱离⽂档流的定位absolute的元素内部不要在其内部包含有脱离⽂档流的元素存在。举⼀个例⼦，某个iframe中内容会不断增⾼或缩⼩，但是iframe不能有⾃⼰的滚动条，需要同步增⾼或减少⽗窗⼝和iframe的⾼度使得滚动⽗窗⼝滚动条滚动显⽰iframe的内容。这个时候，需要计算iframe中body内容真实的⾼度（这个⾼度不能使⽤$(document).height()来获得，，获取的不⼀定是body内容的真实⾼度可能是窗⼝的⾼度），对于脱离⽂档流的元素需要⾃⼰计算⾼度，⽽脱离⽂档流的元素a中还包含脱离a的元素b，咋搞哦。所以才有这⾥的建议。　　　　7. 对使⽤absolute脱离⽂档流的的元素如果做到让absolute元素后⾯的元素⾃适应布局？⼀般使⽤margin定位后⾯的元素来处理。举个例⼦　　　　左边的灰块是绝对定位absolute元素，右边黄⾊部分⽂字⾃适应到绿⾊边框的右边⾃动换⾏。这个是怎么实现的看源码

　　#left绝对定位宽度是100，那么只要使#right margin-left: 110px;这样空出#left的显⽰空间即可。#right的⾃适应照常使⽤。

　　8. relative没有脱离⽂档流。如果原来不明⽩为什么，就有必要看这个例⼦。relative：相对定位，参造物是其本⾝，并不脱离⽂档流，不管你怎么移动，它原有的位置还是会留着。不仅如此，脱离⽂档流的元素相当于⾃⾝⽣成了⼀个新的⽂档流，⽗容器对其没有布局上的影响（最多是定位的影响）。但是relative却不是，⽗容器对其布局影响照旧。举例(还是上⾯的例⼦，我们把#right替换为如下)： #right{ margin-left: 110px; background: #ff0; position: relative; }　　　　效果依旧，⾃适应依然以绿⾊边框的⽗容器为边界。我们如果将#right换成span标签，#right依然以span内联标签的⽅式显⽰。　　如果我将#right换成 #right{ margin-left: 110px; background: #ff0; position: absolute; }　　　　上图效果图右边还有部分没有截完。可以看出⽗容器对#right已经⽆法限制其边界了。#right真正的是⾃成⼀家了。　　不过有⼀点：relative在堆叠优先级上和fixed、absolute⼀样，要⽐兄弟节点中staic节点要⾼。举例

　　　　虽然#right写的顺序在#left后⾯，但是#left依然堆叠在#right上⾯。可以动⼿试⼀下，relative、absolute、fixed等级是⼀样的，static⽐另外三个低⼀级。　　b. 浮动属性float　　float 属性定义元素在哪个⽅向浮动。以往这个属性总应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。如果浮动⾮替换元素，则要指定⼀个明确的宽度；否则，它们会尽可能地窄。　　注释：假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏，这个过程会持续到某⼀⾏拥有⾜够的空间为⽌。　　为什么说浮动元素是脱离⽂档流的。　　脱离⽂档流的元素有个标志：没有实际⾼度。⽐如例⼦ 　　　　#left没有把#panel给撑开，#panel的⾼度为0。　　对于浮动属性来说，位置属性（left/top/right/bottom）是没有⽤的。

　　但是在内部显⽰的时候，#left的兄弟节点会在#left占有的地盘之外显⽰。⽐如，我们新增#right,html代码变为

　　　　⽂字环绕#left。#panel被#right给撑开了。　　浮动有点像玩俄罗斯⽅块。向左浮动，⽅块从右往左滑过来，如果某⼀⾏空间不够（基于⽗容器的宽度），那么这个块会沿着最右边的块的下边沿⽔平划过来，最后看卡到哪⾥就停⽌。举例 　　　　#left4在第⼀⾏left3后⾯宽度不够，换⾏成第⼆⾏。在left2后⾯宽度不够，只能在left1后⾯。#right1⾃然是从第⼆⾏开始查找位置，很幸运第⼆⾏现在唯⼀的元素#left4右⾯空间⾜够，放置即可。#right2在第⼆⾏中没有⾜够的位置，换⾏成第三⾏，找到空余位置插⼊。　　可以看到互动元素之间连接的部分是没有空隙的。这是⼀个很好的特性，可以⽤来做排列，精确到1px。

　　浮动元素不占据⾼度，如果某个元素内部全是浮动元素，最后该元素也没有⾼度，如果想要⽗元素内的浮动元素占有原来的⾼度，在⽗元素内部最后⼀个元素加上css属性为clear：both的块状元素即可。如　　#panel{ width: 200px; border: green solid 1px; }　　

　　　　有时也会在⽗元素后⾯加，不过该⽗元素不会获取到⾼度，但是⽗元素的后⾯的兄弟节点会认为其占⽤了位置。实例

View Code　　 　　对于浮动与定位的位置优先级：　　(fixed == absolute) > float > relative > static。理解为同时设置了position:absolute和float:right。忽略float:right。 　　　　堆叠优先级：　　定位元素z-index>=0时为(fixed == absolute == relative) > static，z-index < 0时(fixed == absolute == relative) < static。理解为兄弟元素⼀个设置了position：relative,另⼀个设置了position:static，当relative元素z-index为>=0时，⽆论static元素设置多少都在relative下⾯。如果relative设置z-index<0,则论static取什么值relative都会在static下⾯。　　定位元素z-index>=0时(fixed == absolute == relative) > float，z-index < 0时(fixed == absolute == relative) < float。理解为兄弟元素⼀个设置了position：relative,另⼀个设置了float:left，当relative元素z-index为>=0时，⽆论float元素设置多少都在relative下⾯。如果relative设置z-index<0,则⽆论float的z-index设置多少relative都会在float下⾯。　　float > static始终成⽴。因为z-index只有在定位元素上才起作⽤，定位元素包括fixed、absolute、relative。　　fixed == absolute == relative，⽐较堆叠顺序直接⽐较z-index⼤⼩即可。