css - z-index属性，无效和有效
问题描述
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
.wrap {width: 200px; height: 200px; border: 10px solid yellow; padding: 10px; margin: 50px; background: red; position:relative;}
.a {width: 50px; height: 50px; background: black; position: absolute; top:0; right: 0; z-index: 9999; float: left;}
img {position: absolute; top:0; left: 0; z-index: 999;}
</style>
</head>
<body>
<div class="wrap">
<img style="width:100%; height:100%;" src="v10.jpg" alt="">
<div class="a"></div>
</div>
<!--
z-index无论设置多高都不起作用情况
这种情况发生的条件有三个：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。 -->
</body>
</html>
https://www.w3.org/TR/2011/RE...
if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'.
所以 position 为 absolute 会让 float 无效。
其次，看渲染顺序
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
可以看到，float 在中间，z-index 正值的 absolute 在最后，所以总会盖住 float。
这篇关于css - z-index属性，无效和有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
