画像スライダーにナビゲーションボタンを配置する

Question

画像スライダーにナビゲーションボタンを配置したいと思います。私はそれをやろうとしましたが、パーセンテージではなく、ピクセル単位でトップポジションを設定すると機能します。ピクセル単位で設定すると反応しません。

<div id="container"> 
<header> 
    header is here 
</header> 
<div id="carousel"> 
<div class="sliderbuttons"> 
    <input type="button" name="next" id="next" value=" > "> 
    <input type="button" name="next" id="prev" value=" < "> 
    </div> 
    <div class="slides"> 
     <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active"> 
     <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide"> 
     <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide"> 
    </div> 


</div> 

</div> 

ここでCSS

*{ 
    box-sizing: border-box; 
} 

#container { 
    width: 90%; 
    margin: 0 auto; 
} 

header { 
    background: black; 
    height: 20px; 
    padding: 1.5em; 
    color: white; 
} 

#carousel { 
    position: relative; 
    margin: 0 auto; 
    width: 45%; 
    background-color: #f4f4f4; 
    margin-top: 15px; 
    min-height: 100%; 

} 

.slide { 
    position: absolute; 
    max-width: 100%; 

} 
.sliderbuttons { 
    } 

#prev,#next { 
    position: absolute; 
    background-color: rgba(255, 148, 41, 0.68); 
    box-shadow: 2px white; 
    border:none; 
    font-size: 2em; 
    color: white; 
    font-weight: bold; 
/* font-family: 'Baloo Tamma', cursive; 
*/ padding:10px; 
    top:45%; 
    width: 10%; 
    /*making the prev,next on top of content*/ 
    z-index: 20; 
} 
#prev { 
    left:0; 
} 
#next { 
    right:0; 
     } 

.active { 
    z-index: 10; 
} 

は、私がこれまで試してみましたものです。 https://jsfiddle.net/w5xm37y4/1/

Answer 1

位置をパーセントで設定する場合は、親要素のパーセンテージを定義する必要があります。あまりに#containerに100％：だから

html, body { height: 100%; position: relative; }

と高さを追加してみてください。私はそれがあなたを助けることができると思います！

（私のひどい英語のため申し訳ありません）