div被iframe遮住的几种情况及解决方法

那么讲解“div被iframe遮住的几种情况及解决方法”的攻略如下：

1. 背景介绍

在HTML页面中，div和iframe是常见的元素。div用于布局，iframe用于引入其他页面或文档。在某些情况下，div与iframe之间的层级关系可能出现问题，导致div被iframe遮住，给页面带来不良影响。因此，了解这种情况及其解决方法是我们开发者必备的知识点。

2. 几种情况

(1) iframe具有fixed属性

当iframe具有fixed属性时，它可以覆盖在当前显示窗口之上，这将导致div无法在iframe之上显示。此时，可以修改iframe的z-index属性，使其变得比div更低。

<div class="container">
  <iframe src="https://www.example.com" width="100%" height="500px" style="position: fixed; z-index: 999;"></iframe>
  <div class="info" style="position: absolute; top: 50px; z-index: 1;"></div>
</div>

(2) iframe的高度超出了它所在的父级元素

当iframe的高度超出了它所在的父级元素时，div也会被覆盖。此时，可以让iframe的height设置为100%，然后将iframe的父级元素的高度设置为固定值。

<style>
  .container {
    height: 500px;
    overflow: hidden;
    position: relative;
  }
  .container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
</style>
<div class="container">
  <iframe src="https://www.example.com"></iframe>
  <div class="info"></div>
</div>

3. 结论

在以上两种场景中，我们分别介绍了解决方案，需要注意的是，还有其他div被iframe覆盖的情况，比如iframe的position为absolute或relative，div的position也为absolute或relative等情况。解决方法则是要思考div和iframe的层级关系，同时灵活使用z-index等属性来控制它们之间的优先级，以此来解决div被iframe遮挡的问题。