z-index属性，无效和有效

发布于
2017-08-12

图片描述

<!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>

html css

阅读 7.1k

8 个回答

得票最新

CRIMX

9.1k3720

发布于
2017-08-12

✓ 已被采纳

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).