浮動框架被其他元素重疊

我想在頁面上創建一個浮動框架。我不知道如何創建一個，所以我谷歌搜索並找到this website to create floating frame.我能夠將框架嵌入到我的頁面，但由於頁面有很多其他元素，它被body中的某些或其他元素重疊。我試圖在body的各個部分放置框架的div，但每次都有一些元素重疊。浮動框架被其他元素重疊

我把它的網站產生的樣本代碼，（因爲我的網頁的代碼過長而由PHP生成，所以避免了在這裏）

<script language="JavaScript1.2"> 
<!-- 
isIE = document.all; 
isNN =! document.all&&document.getElementById; 
isN4 = document.layers; 
isActive = false; 

function MoveInit(e){ 

    topOne = isIE ? "BODY" : "HTML"; 

    whichOne = isIE 
     ? document.all.FloatingLayer 
     : document.getElementById("FloatingLayer"); 

    ActiveOne = isIE 
     ? event.srcElement 
     : e.target; 

    while (ActiveOne.id!="titleBar"&&ActiveOne.tagName!=topOne){ 
    ActiveOne = isIE ? ActiveOne.parentElement : ActiveOne.parentNode; 
    } 

    if (ActiveOne.id=="titleBar"){ 
    offsetx = isIE ? event.clientX : e.clientX; 
    offsety = isIE ? event.clientY : e.clientY; 
    nowX = parseInt(whichOne.style.left); 
    nowY = parseInt(whichOne.style.top); 
    MoveEnabled = true; 
    document.onmousemove = Move; 
    } 
} 

function Move(e){ 

    if (!MoveEnabled) return; 

    whichOne.style.left=isIE 
     ? nowX+event.clientX-offsetx 
     : nowX+e.clientX-offsetx; 

    whichOne.style.top=isIE 
     ? nowY+event.clientY-offsety 
     : nowY+e.clientY-offsety; 

    return false; 
} 

function MoveN4(whatOne){ 

    if (!isN4) return; 

    N4 = eval(whatOne); 
    N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP); 
    N4.onmousedown = function(e){ 
     N4.captureEvents(Event.MOUSEMOVE); 
     N4x=e.x; 
     N4y=e.y; 
    } 

    N4.onmousemove = function(e){ 

    if (isActive){ 
     N4.moveBy(e.x-N4x,e.y-N4y); 
     return false; 
    } 
    } 

    N4.onmouseup = function(){ 
    N4.releaseEvents(Event.MOUSEMOVE); 
    } 
} 

function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden 
{ 
    if(document.layers) //NN4+ 
    { 
     document.layers[DivID].visibility = iState ? "show" : "hide"; 
    } 
    else if(document.getElementById)  //gecko(NN6) + IE 5+ 
    { 
     var obj = document.getElementById(DivID); 
     obj.style.visibility = iState ? "visible" : "hidden"; 
    } 
    else if(document.all) // IE 4 
    { 
     document.all[DivID].style.visibility = iState ? "visible" : "hidden"; 
    } 
} 

document.onmousedown = MoveInit; 
document.onmouseup = Function("MoveEnabled=false"); 
// --> 
</script> 



<!-- Start Floating Layer --> 
<div id="FloatingLayer"  style="position:absolute;width:250px;left:100px;top:100px;visibility:visible; border:solid  1px #FF6600;"> 
    <div id="titleBar" style="cursor:move; width:100%; position:relative; border- bottom:solid 1px #FF6600; background-color:#FF9933;"> 
     <div id="title" style="margin-right:30px; padding-left:3px;"> 
      <font face="Arial" color="#333333">Layer Title</font> 
     </div> 
     <div id="closeX" style="cursor:hand; position:absolute; right:5px; top:0px;"> 
      <a href="#" onClick="ToggleFloatingLayer('FloatingLayer',0);return false"  style="text-decoration:none"><font color="#333333" size="2" face="arial">X</font></a> 
     </div> 
    </div> 
    <div id="floatingContent" style="padding:3px; background-color:#CCCCCC;  color:#333333;"> 
     <!-- place your HTML content here--> 
     Put text, tables or any other HTML contents here, as you would put 
     in any other HTML page. 
     ..... and more. 

     <!-- End of content area --> 
    </div> 
</div> 
<!-- End Floating layer --> 

<!-- To Show The Layer --> 
<a href="javascript:ToggleFloatingLayer('FloatingLayer',1);">Show</a> 
<input type="button" onClick="ToggleFloatingLayer('FloatingLayer',1);" value="Show  Layer"> 

<!-- To Hide The Layer --> 
<a href="javascript:ToggleFloatingLayer('FloatingLayer',0);">Hide</a> 
<input type="button" onClick="ToggleFloatingLayer('FloatingLayer',0);" value="Hide  Layer">

編輯：我想顯示SWF文件嵌入浮動框架中。如果任何人有任何創建浮動框架的選擇，例如現在用於查看照片的Facebook節目，指向正確的方向將是非常有益的，謝謝。

來源

2014-02-17 tigerden