Question

如何覆盖a以在下图中执行此效果：

以防万一，我希望徽标留在导航栏上方

此刻，就像这样：

代码中的

如下所示：

 <!-- menu de navegação -->
<div class="header sticky-top">
<div class="container">
    <div class="row">
    <nav class="menu1 navbar navbar-expand-md">
    <div class="collapse navbar-collapse" id="collapse_target">
    <div class="col-md-3 divlogo">
    </div>
    <div class=" col-md-12">
    <ul class="navbar-nav">
      <li class="nav-item"><a href="<?php bloginfo( 'home')?>" class="nav-link">HOME</a></li>
      <li class="nav-item"><a href="#" class="nav-link">ENCOMENDAS</a></li>
      <li class="nav-item"><a href="#" class="nav-link">CURSOS</a></li>
      <li class="nav-item"><a href="#" class="nav-link">VIDEOAULAS</a></li>
      <li class="nav-item"><a href="#" class="nav-link">BOLO NO POTE</a></li>
      <li class="nav-item"><a href="#" class="nav-link">CONTATO</a></li>
    </ul>
</div>
</div>
</div>
</nav>
</div>
</div>

<!-- banner -->
<section class="sec0">
    <div class="banner1 col-12 img-fluid" alt="Responsive image">
    <div class="row">
    <div class="text1 col-xs-12">
    <div class="logoresponsive row" style="z-index: 9999;">
    <div class="col col-lg-16">
        <a href="index.php"><img id="logo" style="margin-top: -140%; z-index: 9999;" class="logo1 logo img-fluid navbar-brand" alt="responsive image" src="<?php bloginfo('template_url')?>/img/logo.png"></a>
    </div>
    </div>

其中我想要放置在导航栏顶部的徽标是id =“logo”

Answer 1

在徽标上将您的定位设置为abolute（使用position: absolute;），Z-index属性将获得您所需的效果。

Answer 2

您需要编辑父级。查看更多here

首先，你需要关闭所有标签：

<!-- menu de navegação -->
<div class="header sticky-top">
    <div class="container">
        <div class="row">
            <nav class="menu1 navbar navbar-expand-md">
                <div class="collapse navbar-collapse" id="collapse_target">
                    <div class="col-md-3 divlogo">
                    </div>
                    <div class=" col-md-12">
                        <ul class="navbar-nav">
                            <li class="nav-item"><a href="<?php bloginfo( 'home')?>" class="nav-link">HOME</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">ENCOMENDAS</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">CURSOS</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">VIDEOAULAS</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">BOLO NO POTE</a></li>
                            <li class="nav-item"><a href="#" class="nav-link">CONTATO</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<!-- banner -->
<section class="sec0">
    <div class="banner1 col-12 img-fluid" alt="Responsive image">
        <div class="row">
            <div class="text1 col-xs-12">
                <div class="logoresponsive row" style="z-index: 9999;">
                    <div class="col col-lg-16">
                        <a href="index.php"><img id="logo" style="margin-top: -140%; z-index: 9999;" class="logo1 logo img-fluid navbar-brand" alt="responsive image" src="<?php bloginfo('template_url')?>/img/logo.png"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

然后，不要编辑图像样式（即子图像），而是编辑section标记（父标记）。它希望如此：

注意： z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

<section class="sec0" style="position: absolute;margin-top: -200px; z-index: -1;">

我不确切地知道你想要做什么，但这样你就会在背景和上面的文字上留下图像。

希望这有帮助。

如何覆盖<div>

2 个答案: