如何在旋转木马上的标题中浮动图像

Question

我在标题面板中有一个公司徽标，它的高度高于其父容器的高度（按设计）。

标题面板下方是旋转木马。为了更好地理解这一点，请查看下面的链接以获取图像。

正如您在示例图像中看到的那样，我希望徽标位于旋转木马的顶部。当我尝试它时，旋转木马位于徽标的顶部而不是它的后面。

这是我的代码。

.navbar.navbar-default {
    border: none;
    height: 120px;
    background-color: #f4f4f4;
    border-top: 3px solid #001f36;
}


.navbar-header {
    height: 100%;
}

.navbar-brand {
    height: auto;
    padding: 0;
    margin-top: -3px;
    margin-left: 0;
}

<div class="content-wrapper">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" title="Test Logo"><img src="/Images/main-logo.png" alt="Test Logo" /></a>
    </div>
    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown 1</a></li>
                    <li><a href="#">Dropdown 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>


<--CAROUSEL-->
  
<div id="carousel-container">
    <div id="body-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://blog.eastfist.com/wp-content/uploads/2011/05/nikonD5100_img_05_l.jpg" alt="Chania">
            </div>
            <div class="item">
                <img src="http://cdn0.mos.techradar.futurecdn.net/Review%20images/PhotoRadar/Nikon/Nikon%20D5100/miniature.jpg" alt="Chania">
            </div>
            <div class="item">
                <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d4/img/sample/img_03_l.jpg" alt="Flower">
            </div>
            <div class="item">
                <img src="img_flower2.jpg" alt="Flower">
            </div>
        </div>
        <!--Left and Right Buttons-->
        <a class="left carousel-control" href="#body-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#body-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

我相信这是您根据发布的图片尝试做的事情。您可以使用display：block并更改if(!cin)类的z-index，以将徽标浮动在轮播上。见工作示例。

navbar-brand

.navbar.navbar-custom {
  border: none;
  background: red;
  border-top: 3px solid #001f36;
  margin-bottom: 0px;
  border-radius: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar.navbar-custom .navbar-brand img {
  position: relative;
  display: block;
  z-index: 1000;
}
.navbar.navbar-custom .navbar-nav > li > a {
  color: white;
}
@media (max-width: 767px) {
  .navbar.navbar-custom .navbar-right > li,
  .navbar.navbar-custom .navbar-right .dropdown-menu > li {
    text-align: right;
  }
}