固定div在引導轉盤上方隱藏

-2

嗨我有一個固定的div連接到我的導航欄的左下角。我無法將它展示在旋轉木馬的頂部。 圖片隱藏它任何想法？固定div在引導轉盤上方隱藏

我該如何獲得這個固定div浮動在旋轉木馬之上？

<div class="container-fluid topnav"> 
    <div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"> 
     <div class="callnow-btn"> 
    <a href="tel:12178207597">Call Now (217) 820-7597</a> 
    </div> 
    </div> 
    </div> 
</div>

任何幫助將不勝感激！

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Untitled Document</title> 

<link rel="stylesheet" href="css/font-awesome.min.css"> 

<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/custom.css" rel="stylesheet" type="text/css"> 

</head> 
<body> 
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> 
<div class="container" id="custom-nav"> 
<div class="navbar-header"> 
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a href="./" class="navbar-brand"></a> 
</div> 
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
<ul class="nav navbar-nav"> 
<li> 
<a href="#">Home</a> 
</li> 
<li> 
<a href="#">About</a> 
</li> 
<li> 
<a href="#">Services</a> 
</li> 
<li> 
<a href="#">Contact</a> 
</li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Reviews</a></li> 
<li><a href="#">Careers</a></li> 
</ul> 
</li> 
</ul> 
</nav> 
</div> 
</header> 
<div class="container-fluid topnav"> 
    <div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"> 
     <div class="callnow-btn"> 
    <a href="tel:12178207597">Call Now (217) 820-7597</a> 
    </div> 
    </div> 
    </div> 
</div> 
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> 

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

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item slides active"> 
     <!-- Overlay --> 
    <div class="overlay"></div> 
     <div class="slide-1"></div> 
     <div class="hero"> 
     <hgroup> 
      <h1>We are creative</h1>   
      <h3>Get start your next awesome project</h3> 
     </hgroup> 
     <button class="btn btn-hero btn-lg" role="button">See all features</button> 
     </div> 
    </div> 
    <div class="item slides"> 
     <!-- Overlay --> 
    <div class="overlay"></div> 
     <div class="slide-2"></div> 
     <div class="hero">   
     <hgroup> 
      <h1>We are smart</h1>   
      <h3>Get start your next awesome project</h3> 
     </hgroup>  
     <button class="btn btn-hero btn-lg" role="button">See all features</button> 
     </div> 
    </div> 
    <div class="item slides"> 
     <!-- Overlay --> 
    <div class="overlay"></div> 
     <div class="slide-3"></div> 
     <div class="hero">   
     <hgroup> 
      <h1>We are amazing</h1>   
      <h3>Get start your next awesome project</h3> 
     </hgroup> 
     <button class="btn btn-hero btn-lg" role="button">See all features</button> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.3.min.js"></script> 

<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script> 
</body> 
</html> 


/* Above Navbar */ 

.topnav { 
top: 51px !important; 
position: fixed; 
background-color: #fff; 
height: 30px; 
width: 100%; 
} 

.callnow-btn { 
    border-bottom-right-radius: 10px; 
    font-family: Arial; 
    color: #Ef7800; 
    font-size: 14px; 
    background: #192F42; 
    padding: 5px 0px 5px 0px; 
    text-decoration: none; 
    width: 197px; 
    height: 35px; 
} 

.callnow-btn a { 
    border-bottom-right-radius: 10px; 
    font-family: Arial; 
    color: #Ef7800; 
    font-size: 14px; 
    background: #192F42; 
    padding: 5px 20px 5px 20px; 
    text-decoration: none; 
    width: 197px; 
    height: 35px; 
} 

.callnow-btn:hover a:hover{ 
    text-decoration: none; 
    color: #008000; 
} 

.no-padding { 
    padding: 0px; 
} 

/* Custom Navbar */ 

#custom-nav { margin-left: 0px;} 
.navbar-inverse { 
    background-color: #192F42; 

} 
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42} 
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42} 
.dropdown-menu { background-color: #192F42} 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42} 
.navbar-inverse { background-image: none; } 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;} 
.navbar-inverse { border-color: #192F42} 
.navbar-inverse .navbar-brand {  
    height: 50px; 
    width: 142px; 
    background: url(../images/brand.jpg) no-repeat; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover;} 
.navbar-inverse .navbar-brand:hover { color: #FFFFFF} 
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF} 
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800} 
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800} 
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800} 
.dropdown-menu>li>a { color: #FFFFFF} 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800} 
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800} 
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800} 
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800} 
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800} 

/********************************/ 
/*  Fade Bs-carousel  */ 
/********************************/ 
.fade-carousel { 
    top: 51px; 
    position: relative; 
    height: 300px; 
} 
.fade-carousel .carousel-inner .item { 
    height: 300px; 
} 
.fade-carousel .carousel-indicators > li { 
    margin: 0 2px; 
    background-color: #f39c12; 
    border-color: #f39c12; 
    opacity: .7; 
} 
.fade-carousel .carousel-indicators > li.active { 
    width: 10px; 
    height: 10px; 
    opacity: 1; 
} 

/********************************/ 
/*   Hero Headers  */ 
/********************************/ 
.hero { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 3; 
    color: #fff; 
    text-align: center; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 0 rgba(0,0,0,.75); 
     -webkit-transform: translate3d(-50%,-50%,0); 
     -moz-transform: translate3d(-50%,-50%,0); 
      -ms-transform: translate3d(-50%,-50%,0); 
      -o-transform: translate3d(-50%,-50%,0); 
       transform: translate3d(-50%,-50%,0); 
} 
.hero h1 { 
    font-size: 6em;  
    font-weight: bold; 
    margin: 0; 
    padding: 0; 
} 

.fade-carousel .carousel-inner .item .hero { 
    opacity: 0; 
    -webkit-transition: 2s all ease-in-out .1s; 
     -moz-transition: 2s all ease-in-out .1s; 
     -ms-transition: 2s all ease-in-out .1s; 
     -o-transition: 2s all ease-in-out .1s; 
      transition: 2s all ease-in-out .1s; 
} 
.fade-carousel .carousel-inner .item.active .hero { 
    opacity: 1; 
    -webkit-transition: 2s all ease-in-out .1s; 
     -moz-transition: 2s all ease-in-out .1s; 
     -ms-transition: 2s all ease-in-out .1s; 
     -o-transition: 2s all ease-in-out .1s; 
      transition: 2s all ease-in-out .1s;  
} 

/********************************/ 
/*   Overlay   */ 
/********************************/ 
.overlay { 
    position: absolute; 
    width: 100%; 
    height: 300px; 
    z-index: 3; 
    background-color: #080d15; 
    opacity: .7; 
} 

/********************************/ 
/*   Custom Buttons  */ 
/********************************/ 
.btn.btn-lg {padding: 10px 40px;} 
.btn.btn-hero, 
.btn.btn-hero:hover, 
.btn.btn-hero:focus { 
    color: #f5f5f5; 
    background-color: #1abc9c; 
    border-color: #1abc9c; 
    outline: none; 
    margin: 20px auto; 
} 

/********************************/ 
/*  Slides backgrounds  */ 
/********************************/ 
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2, 
.fade-carousel .slides .slide-3 { 
    height: 300px; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 
.fade-carousel .slides .slide-1 { 
    background-image: url(../images/carousel/znc-slider1.jpg); 
} 
.fade-carousel .slides .slide-2 { 
    background-image: url(../images/carousel/znc-slider2.jpg); 
} 
.fade-carousel .slides .slide-3 { 
    background-image: url(../images/carousel/znc-slider3.jpg); 
} 

/********************************/ 
/*   Media Queries  */ 
/********************************/ 
@media screen and (min-width: 980px){ 
    .hero { width: 980px; }  
} 
@media screen and (max-width: 640px){ 
    .hero h1 { font-size: 4em; }  
}

來源

2017-02-04 zach newberry

請將您的代碼包含在您的SO帖子中。 –

請不要使用需要登錄/帳戶的代碼片段工具。建議您使用由SO提供的片段工具。（'<>'按鈕）。 –

沒有工作小提琴，我無法測試，並確保沒有別的要求，但通過看你的標記，這應該工作：

.topnav { z-index: 1; } 
.carousel { z-index: 0; }

如果它不工作，使用< >按鈕創建一個適當的工作片段，鏈接所有必需的資產，以便重現您所描述的問題。確保它是可驗證的。

我以前在這裏解釋過stacking contexts。

來源

2017-02-04 01:46:36

固定div在引導轉盤上方隱藏

回答

相關問題