html - 在图像滑块上定位导航按钮

我想将导航按钮放置在图像滑块上，并且希望响应迅速。我尝试这样做，但是只有在以像素而不是百分比设置顶部位置时，它才起作用。将其设置为像素无响应。

<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/

最佳答案

如果要以百分比设置位置，则必须为父元素定义百分比。所以尝试添加

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

和高度：#container也为100％。我认为（并希望！）它可以为您提供帮助。

（对不起我的英语不好）