Question

我正在尝试在我的网页顶部的导航栏和转盘上放置一个徽标。我可以将徽标放在导航栏的中心，但我无法弄清楚如何使它比导航栏更大并将旋转木马覆盖在它上面。

Here's a small mockup of what I'm trying to achieve

这是我到目前为止的一些代码

<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</header>
<nav id="navbar-primary" class="navbar transparent" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="navbar-primary-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><img id="logo-navbar-middle" src="assets/logo-final.png" width="300" alt="Logo Thing main logo"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Answer 1

我要做的是将徽标与导航容器分开并将其置于绝对位置。也许像这样https://jsfiddle.net/qdo9mqze/2/，这是一个粗略的草案，但你明白了。给它一些边框底部/顶部转盘或导航来复制你的设计。

注意：现在我的选秀就像一面旗帜......

<div class="carousel"></div>
<div class="logo"></div>
<div class="nav"></div>

    .carousel {
  background: red;
  height: 300px;
  width:100%;
  position: relative;
}

.logo{
  background: blue;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  margin: 0 auto;
  top:200px;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.nav{
  background:green;
  width:100%;
  height: 100px;
  position:relative;
}

徽标覆盖导航栏和旋转木马

1 个答案: