0

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

查看全部 8 个回答

0

你的z-index属性在两个同级绝对定位元素身上,当然后面的生效了。要改变层级;改变属性的值,正数和负数都可以。

推荐答案

0

已采纳

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 无效。

其次,看渲染顺序

  1. the background and borders of the element forming the stacking context.

  2. the child stacking contexts with negative stack levels (most negative first).

  3. the in-flow, non-inline-level, non-positioned descendants.

  4. the non-positioned floats.

  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  7. the child stacking contexts with positive stack levels (least positive first).

可以看到,float 在中间,z-index 正值的 absolute 在最后,所以总会盖住 float。