コンテナのナビゲーションバー、カルーセル、イントロの配置

私はnavbar、カルーセル、イントロを持っています。コンテナのナビゲーションバー、カルーセル、イントロの配置

私が欲しいもの：

カルーセル完全な幅と高さ。
カルバゼ上の上のNavbar
カルーセルの下にイントロ。私が今持っている何

：

カルーセル完全な幅と高さが、画像カルーセルでは唯一の全幅はなく高さ
あるナビゲーションバーカルーセルの上に上に（成功）
イントロはnavbarの下で開始し、カルーセルの下で開始すると仮定します。

HTML

<div class="carousel"></div> 
<div class="navbar"></div> 
<div class="intro"></div>

CSS

html, body { height: 100%; width: 100% } 
.navbar {} 
.intro {} 

.carousel { 
    position: absolute; 
    margin: auto; 
    display: block; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
}

出典

2017-12-30 EnzoTrompeneers

私は、カルーセルとナビゲーションバーのための新しいコンテナを追加しました。それから私はそれの中に絶対にnavbarを置いた（それを上に接着した）。ここで

コード（下部にスニペットを実行する）である：

html, body 
 
{ 
 
    height: 100%; 
 
    width: 100% 
 
} 
 

 
#carouselNavBarContainer 
 
{ 
 
    position:relative; 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
.carousel 
 
{ 
 
    position: relative; 
 
    float:left; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding:10px 
 
    display: block; 
 
    z-index: 1; 
 
    border:1px solid #09f; 
 
} 
 

 
.carousel img 
 
{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 

 
.navbar 
 
{ 
 
    position:absolute; 
 
    top:0px; 
 
    z-index:2; 
 
    border:1px solid #f00; 
 
    padding:10px; 
 
} 
 

 
.intro 
 
{ 
 
    position:relative; 
 
    float:left; 
 
    border:1px solid #000; 
 
    padding:10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Title of the document</title> 
 
</head> 
 

 
<body> 
 
    <div id="carouselNavBarContainer"> 
 
    <div class="carousel"><br/><br/><br/><br/><br/><br/><br/>This is the carousel.</div> 
 
    <div class="navbar">NAVBAR GOES ON TOP</div> 
 
    </div> 
 
    <div class="intro">Intro on the bottom</div> 
 
</body> 
 

 
</html>

出典

2017-12-30 11:00:27 Ivan86

あなたは「カルーセル」と「ナビゲーションバー」の親のdivを持っており、以下のようなスタイルを追加することができます -

.parentDiv{ 
    position:relative; 
    height:100%; 
} 

    /* Carousel full width and height with images */ 

    .carousel{ 
    position: absolute; 
    margin: auto; 
    display: block; 
    height: 100%; 
    width: 100%; 
    left:0px; 
    top:0px; 
    padding-top:50px; 
    z-index: -1; 
    } 

    /* note that images will be be stretchy */ 
    .carousel img{ 
    width:100%; 
    height:100%; 
    } 

    /* Navbar on top over the carousel */ 
    .navbar{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:50px; /* for Example */ 
    z-index:9; /* greater than carousel */ 
    }

出典

2017-12-30 11:03:57

コンテナのナビゲーションバー、カルーセル、イントロの配置

答えて

関連する問題