javascript - 菜单上的文本重叠( Bootstrap )

Question

我插入的 Bootstrap 轮播标题有问题。 这是我的网页的图像，请注意右上角，我的文章标题重叠在我的菜单上。(单击菜单按钮时会弹出该菜单)。我希望该标题位于菜单后面。

我不知道这是否是菜单、 Bootstrap 或 PHP 代码在执行此操作。这是该轮播标题的代码:

<?php
    require_once $_SERVER['DOCUMENT_ROOT'].'/Gamesite/core/init.php';

    //
    $SELECT_NEWS = "select * from news limit 4";
    $QUERY_NEWS = $db->query($SELECT_NEWS);


?>
<div class="container-fluid" id="Banner-Container">

        <div class="col-md-12" id="Banner-12-Container">
            <?php while ($NEWS = mysqli_fetch_assoc($QUERY_NEWS)): ?>
                <div class="col-sm-6 col-md-3" id="Banner-Grid-4">
                    <img src="<?php echo $NEWS['news_photo']; ?>" alt="..." class="img responsive" id="Banner_News_Images">
                    <div class="carousel-caption">
                        <h4 id="Banner-Title"><?php echo $NEWS['title']; ?></h4>
                    </div>
                </div>
            <?php endwhile; ?>
            <!-- Add something here .... -->
        </div>

</div>

和CSS:

#Banner-Container {
  @media screen {
    @media (min-width: 100px)
      and (max-width: 960px) {
        padding-top: 45px;
        padding-left: 0;
        padding-right: 0;
    }
  }
  padding-top: 65px;
  padding-left: 0;
  padding-right: 0;
}

#Banner-12-Container {
  padding-left: 0;
  padding-right: 0;
}

#Banner-Grid-4 {
  padding-left: 0;
  padding-right: 0;
}

  #Banner-Grid-4:hover {
    padding-left: 0;
    padding-right: 0;
  }

#Banner_News_Images {
  height: 300px;
  width: 100%;
}

#Banner_News_Images:hover {
  height: 300px;
  width: 100%;
  transition: 1s;
  opacity: 0.7;
}

.carousel-caption {
  float: left;
  padding-left: 0;
  right: 40%;
  left: 5%;
}

#Banner-Title {
  color: white;
  text-align: left;
  float: left;
}

#Banner-Title:hover {
  color: white;
}

Answer 1

原因如下:

z-index: 9;

对于 z 平面，您是说文本应该出现在 9 号平面上。而一切都设置为默认值(我认为为零)。

要解决此问题，请为右侧边栏的容器提供更高的 z-index 值。