css下拉图片挡住了怎么办

CSS下拉图片挡住了怎么办？这是很多前端开发人员都会遇到的问题。下面介绍一些常见的解决方案。

 // 当前元素需要开启 z-index 属性
    .parent {
        position: relative;
        z-index: 1;
    }
    // 要被遮挡的元素
    .child {
        position: absolute;
        top: 35px; // 下拉元素高度
        z-index: -1; // 比父元素低的 z-index 值
    } 

解决方案：使用 z-index 属性设置层级关系，通常需要在父元素上设置一定的 z-index 值，再将要被遮挡的元素的 z-index 值设置得比父元素更低即可。

还有一种情况需要特别注意，就是当下拉元素的父元素或者祖先元素存在 transform、perspective 等属性时，z-index 属性会失效。解决方式是将下拉元素直接添加到 body 元素下，这样就可以避免因祖先元素影响而导致 z-index 属性不生效的问题。