浮动框架被其他元素重叠

Question

我正在尝试在页面上创建一个浮动框架。 我不知道如何创建框架 ，因此我用Google搜索并找到了该网站来创建浮动框架。 我可以将框架嵌入到我的页面中，但是由于页面中包含许多其他元素，因此该页面与body中的某些元素或其他元素重叠。 我尝试将div帧放置在body各个部位，但是每次都有一些元素重叠。

我将网站生成的代码作为示例放置（因为我页面的代码太长且由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在查看照片时显示的那些图片，那么向我指出正确的方向将非常有帮助，谢谢。

Answer 1

我认为您的问题与z-index有关 。

尝试将此CSS样式添加到浮动框架中：

z-index: 99999;

Answer 2

z-index或Flash之类的嵌入式对象可能是问题。

您可以尝试为浮动框架使用较高的z-index值，以使其出现在其他元素的顶部。 还要看看其他元素的z索引...它们也可能具有较高的z索引。

如果您的问题是Flash对象，请在embed / object标签中尝试以下操作：

<param name="wmode" value="opaque" />

如本博文所述： Flash和z-index问题已解决