我做了一個Javascript滑塊，我對CSS有一些嚴重的麻煩。

Question

所以我做了一個Javascript滑塊。問題是，圖像就像是當圖像加載時它下推我的下一個/ prev div，而它沒有坐在我滑塊右側的容器中。我不知道發生了什麼以下是我的代碼： 如果您需要查看，我可以發佈一個指向我網站的鏈接。 HTML

<div id="sliderFrame"> 
    <img src="img/CS-GO-Test.jpg" name="slider" alt="" /> 
    <div id="prev" onClick="swapImage(-1)"></div> 
    <div id="next" onClick="swapImage(+1)"></div> 
</div> 

CSS

#sliderFrame{ 
margin-top: 10px; 
width:100%; 
height:350px; 
border: 2px solid #003E66; 
background:#CAE9FF; 

} 
#prev{ 
z-index:99; 
display:block; 
float:left; 
height:100%; 
width:5px; 
background-color:#8F8F8F; 
opacity: 0.2; 
width:10%; 
position:relative; 
} 
#prev:hover{ 
opacity: 0.4; 
} 
#next{ 
z-index:99; 
display:block; 
float:right; 
height:100%; 
width:10px; 
background-color:#8F8F8F; 
opacity: 0.2; 
width:10%; 
position:relative; 
} 
#next:hover{ 
opacity: 0.4; 
} 

的JavaScript

var Image = new Array("img/CS-GO-Test.jpg", "img/CS-GO-Test2.jpg", "img/test.jpg"); 
var ImageNum = 0; 
var ImageLength = Image.length -1; 

function swapImage(num){ 
    ImageNum = ImageNum + num; 

    if(ImageNum > ImageLength){ 
    ImageNum = 0; 
    } 

    if(ImageNum < 0){ 
    ImageNum = ImageLength; 
    } 

document.slider.src = Image[ImageNum]; 
} 

Answer 1

要放置上述sliderFrame next和prev的div使用絕對定位，而不是相對定位對於#prev和#next元件。

這裏是我會怎麼做：

#sliderFrame { 
margin-top: 10px; 
width: 100%; 
height: 350px; 
border: 2px solid #003E66; 
background: #CAE9FF; 
position:relative; /*add this so that divs inside can be placed relative to THIS div*/ 
} 
#prev { 
z-index: 99; 
display: block; 
height: 100%; 
width: 10px; 
background-color: #8F8F8F; 
opacity: 0.2; 
width: 10%; 
position: absolute; /*needed for placement relative to the parent element (sliderFrame) and for overlapping elements*/ 
top: 0; /*place on top*/ 
} 
#next { 
z-index: 99; 
display: block; 
height: 100%; 
width: 10px; 
background-color: #8F8F8F; 
opacity: 0.2; 
width: 10%; 
position: absolute; /*absolute positioning to place relative to parent element (sliderFrame) */ 
right: 0; /*instead of floats use right for positioning*/ 
top: 0; /*place on top*/ 
} 

概括起來，確保父容器（sliderFrame）設置的位置相對和使用絕對定位爲需要內部元素定位在父元素上。

看看這個鏈接，瞭解更多關於絕對和相對定位： http://css-tricks.com/absolute-positioning-inside-relative-positioning/