admin管理员组

文章数量:1611180

一、前言
今天遇到了一个关于position： fixed 层级的css问题
设置了position属性为非static的时候，他的层级是怎样比较的呢？
二、代码
是根据z-index属性的大小来比较的。

那么看下面代码：

	<div class="box1">
        <div class="fixed1">

        </div>
    </div>
    <div class="fixed2"/>
    <style>
    .box1 {
        position: relative;
    }
    .box1 .fixed1 {
        position: fixed;
        z-index: 1000;
        height: 10px;
        width: 10px;
        background-color: red;  
        left: 0;
        top: 0;
    }
    .fixed2 {
        height: 100px;
        width: 100px;
        left: 0;
        top: 0;
        background-color: blue;
        position: fixed;
        z-index: 10;
    }
</style>

我的理想效果是，红色放在蓝色的上面

但是实际效果确是

方案1：我们需要设置红色块的父级元素的z-index值大于蓝色块的值
方案2：不要为红色块的父级元素设置position属性（或为static）
三、结论
引用JandyPam的总结

1、首先是遵循DOM的规则，同级的后面居上。
2、一般有定位属性的元素会高于无定位属性的同级元素。
3、都有定位属性的同级元素，z-index大者居上 。
4、如果是非同级的元素且（祖先元素设置了非static的position值）时，则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上。

本文标签： 层级属性Positionfixed

版权声明：本文标题：position属性，fixed层级问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728604299a1165256.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。