我有一个隐藏的图片轮播，仅在用户点击图片时才会显示。我现在的问题是，拉动旋转木马将桌子向下推，我怎样才能将旋转木马覆盖在现有桌子的顶部？代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
table {border: none;}
</style>
<script>
function toggleOverlay() {
var div = document.getElementById('overlay');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
<body>
<h1 align="center">TYPE OF CLOTHING </h1>
<h2 align="left"> OLD NAVY </h2>
<button style="float: right;" type="button" onclick="history.go(-1)"> Back </button>
<div>
<!-- Carousel Code -->
<div id="overlay" style="display: none;">
<button type="button" onclick="toggleOverlay()"> X </button>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<table align="center" border="1" width="100%" height="100%" style="margin: 0px;" cellspacing="0" cellpadding="0">
<tr>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
</tr>
<tr>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
</tr>
<tr>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
将DIV中的每个部分换行，然后制作轮播的包裹div position:absolute（如果需要，您还可以添加top:100px将其向下移动，也许width:999px或者你有什么）
position:absolute将从HTML＆＃34; flow＆＃34;中移除DIV。并允许您将其定位在您希望 相对于其父DIV 的任何位置（在本例中为文档body）。
注意：如果您希望将绝对定位的DIV放在另一个DIV中，那么（父）div必须是position:absolute本身，或者position:relative （非常类似于默认值） ，position:static，除了它允许绝对定位的元素在其中）
function toggleOverlay() {
var div = document.getElementById('overlay');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
table {border: none;}
#carouselDIV{position:absolute;top:0;left:0;}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h1 align="center">TYPE OF CLOTHING </h1>
<h2 align="left"> OLD NAVY </h2>
<button style="float: right;" type="button" onclick="history.go(-1)"> Back </button>
<div id="carouselDIV">
<!-- Carousel Code -->
<div id="overlay" style="display: none;">
<button type="button" onclick="toggleOverlay()"> X </button>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div id="tableDIV">
<table align="center" border="1" width="100%" height="100%" style="margin: 0px;" cellspacing="0" cellpadding="0">
<tr>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
</tr>
<tr>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
</tr>
<tr>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
<td align="center" onclick="toggleOverlay()"><img src="http://dl.hiapphere.com/data/icon/201412/HiAppHere_com_com.studio8apps.instasizenocrop.png" alt="description here" /></td>
</tr>
</table>
</div>