如何让我的div重叠在一切之上，而不是将其下面的所有东西都推下来？

时间：2012-08-12 02:11:17

标签： php html positioning show overlap

在此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>

2 个答案:

答案 0 :(得分：1)

css样式z-index就是你要找的。

答案 1 :(得分：1)

使用top: 200px;时，您应该使用margin-top代替position:absolute;

相关问题
最新问题