javascript - 我制作了一个 Javascript slider ，但我在使用 CSS 时遇到了一些严重的问题。

Question

所以我制作了一个 Javascript Slider。问题是图像就像在图像加载时按下我的下一个/上一个 div 并且它不在我为 slider 设置的容器中。我不确定发生了什么这是我的代码: 如果您需要查看，我可以发布指向我网站的链接。 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

要将下一个和上一个 div 放置在 sliderFrame 上方，请对 #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/