在圖像滑塊上定位導航按鈕

我想將導航按鈕定位在圖像滑塊上，並且我想要響應。我試過這樣做，但它只適用於以百分比表示像素不在百分比中的頂部位置。以像素爲單位設置不響應。在圖像滑塊上定位導航按鈕

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

來源

2016-09-14 Ndx

如果要以百分比設置位置，則必須定義父元素的百分比。因此，嘗試添加

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

和高度：在#container的100％了。我認爲（並希望！）它可以幫助你。（對不起，我可憐的英語）

來源

2016-09-14 23:15:00 Pepi

謝謝！它現在有效。但我很好奇爲什麼我必須爲body，html，#container，＃carousel設置高度100％？誰能解釋一下？ – Ndx

元素的百分比高度是相對於其容器定義的。如果沒有元素具有定義的高度（以像素爲單位），則具有100％的html元素可讓您將高度基於視口。對於#container，＃carousel ...默認高度取決於它們的內容，因此您必須明確定義高度100％。 – Pepi

在圖像滑塊上定位導航按鈕

回答

相關問題