解决iframe显示在图片上方问题

在前端开发中，有时需要将iframe元素显示在图片上方。由于iframe和图片默认都处于同一层级，会导致重叠显示问题。

本文将介绍如何使用CSS的z-index属性来调整iframe和图片的层级关系，从而实现iframe显示在图片上方的效果。

代码示例

假设HTML结构如下：


可以通过以下CSS代码将iframe显示在图片上方：

```css.menu_scroll_top_img {  position: relative; /* 设置父元素为相对定位 */}

.fengrui-img {  z-index: 1; /* 设置图片的层级为1 */}

iframe {  position: absolute; /* 设置iframe为绝对定位 */  top: 0;   left: 0;  z-index: 2; /* 设置iframe的层级为2，高于图片 */}

### 解释

1.  `position: relative;`: 将包含iframe和图片的父元素设置为相对定位，这样子元素的绝对定位才会相对于父元素进行定位。
2.  `z-index`: 用于设置元素的层叠顺序。`z-index`值越大，元素就越靠近用户。

### 总结

通过设置`z-index`属性，可以轻松地控制iframe和图片的层级关系，实现iframe显示在图片上方的效果。请注意，要使`z-index`生效，必须先将元素的`position`属性设置为`relative`, `absolute`或`fixed`。