我正在尝试使用 .prepend() 和 .append() 将我的左右控制器插入幻灯片 div 的侧面，但它们显示在窗口的上角
Javascript DOM 插入（在 .html 文件中运行）：
$('#slideShow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
幻灯片 HTML：
<body>
<div id="slice">
<div class="container">
<div id ="mainContent">
<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideShow">
<div id="slidesContainer">
<div class="slide">
<h2>Web Development With PHP</h2>
<p><a href="#"><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></a></p>
</div>
<div class="slide">
<h2>Database Design with MySQL Workbench</h2>
<p><a href="file:///C:/Users/Owner/Documents/IRWireframe/experience.html#test"><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></a></p>
</div>
<div class="slide">
<h2>Web Design With CSS and HTML</h2>
<p><a href="#"><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of CSS webpage" /></a></p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
</div>
</div>
</div>
</body>
CSS：
#slideShow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideShow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideShow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
top: 0;
left: 0;
background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
top: 0;
right: 0;
background:transparent url(control_right.jpg) no-repeat 0 0;
}