在这个 HTML 中，我设置了一个代码，这样如果你点击一个图片链接，div就会出现一个。每当div出现时，有些项目会被推下，有些则放在div.
我怎样才能做到这一点div，以使点击时出现的内容与所有内容重叠并且不会将其向下推等？
任何帮助都会很棒！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
</script>
<style>
#slidingDiv, #slidingDiv_2{
height:600px;
width:1038px;
margin-left:-538px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
display:none;
z-index: 2;
}
body
{
margin: 0px
}
.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
#horizon {position:absolute; top:50%; left:0px; width:100%; height:1px; overflow:visible;}
#contain {position:absolute;width:100%; height:100%;}
#content {position:absolute; top:-415px; left:50%; margin-left:-537px; width:1074px; height:702px; background-image:url(residential.png);}
#security{position:absolute;width:123px; height:0px; padding-left:390px;margin-top:3px;}
#climate{position:absolute;width:101px; height:2px; margin-left:430px; margin-top:-140px;}#left {height:50%; width:50%; float:left;}#right {height:50%; width:50%; float:right;}#audio{position:absolute;width:123px; height:59px; margin-left:119px; margin-top:190px;}#lighting{width:105px; height:239px; padding-left:71px; padding-top:220px;}#visual{position:absolute;width:105px; height:0px; margin-left:38px; margin-top:-130px;} div#container {
width: 1074px;
margin: 0px auto 0 auto;
padding: 0px;
background-image:url(file:///Macintosh%20HD/Users/julieseif/Desktop/Desktop/Projects/iQ%20Homes/popup.png);
}
#ipad{
}
#keypad{
position:relative;
margin-left:440px;
margin-top:-206px;
}
/* HOVER STYLES */
div#pop-up {
display: none;
position: absolute;
width: 1074px;
padding: 0px;
font-size: 90%;
margin-left:0px;
margin-top:200px; }
</style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var moveRight = 0;
var moveDown = 0;
$('a#trigger').hover(function(e) {
$('div#pop-up').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() {
$('div#pop-up').hide();
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('residential/lighting2.png','residential/yeahhhh.gif','resiscons/cam2.png','resiscons/visual2.png','resiscons/audio2.png','resiscons/phone2.png','resiscons/thermo2.png','resiscons/ipad2.png','resiscons/keypad2.png','resiscons/lighting2.png')">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="showHide.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
</script>
<body background="ImJustCreative-2010-08-23-at-06.49.36.jpg">
<span id="dummy"></span>
<div id="horizon">
<div id="content">
<div id="contain" class="shadow">
<div id="right">
<div id="security"><a href="#"id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','resiscons/cam2.png',1)"class="show_hide" rel="#slidingDiv"><img src="resiscons/cam1.png" name="Image8" width="55" height="52" border="0" id="Image8" /></a></div> <div id="slidingDiv">
Fill this space with really interesting content.
</div>
<div id="telephony" style="margin-left:395px; margin-top:240px;"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','resiscons/phone2.png',1)"><img src="resiscons/phone1.png" name="Image10" width="77" height="69" border="0" id="Image10" /></a></div><div id="visual"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','resiscons/visual1.png',1)"><img src="resiscons/visual2.png" name="Image7" width="254" height="180" border="0" id="Image7" /></a></div><div id="audio"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','resiscons/audio2.png',1)"><img src="resiscons/audio1.png" name="Image9" width="96" height="51" border="0" id="Image9" /></a></div></div><div id="lighting"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','resiscons/lighting1.png',1)"><img src="resiscons/lighting2.png" name="Image14" width="127" height="129" border="0" id="Image14" /></a></div><div id="ipad" style="margin-top:-115px; padding-left:10px;"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','resiscons/ipad2.png',1)"><img src="resiscons/ipad1.png" name="Image12" width="131" height="149" border="0" id="Image12" /></a></div><div id="keypad"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','resiscons/keypad2.png',1)"><img src="resiscons/keypad1.png" name="Image13" width="58" height="76" border="0" id="Image13" /></a></div>
<div id="climate"><a href="#" id="trigger" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','resiscons/thermo2.png',1)"><img src="resiscons/thermo1.png" name="Image11" width="80" height="63" border="0" id="Image11" /></a></div>
<div id="pop-up">
<img src="popup.png"/>
</div></div><center><img src="tagline1.gif" /></center></div></div>
<br/>
</div></div>
</body>
</html>