Question

我插入了这个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值。

菜单上的文本重叠（引导程序）

1 个答案: