重叠折叠/展开框架集中的内容答案

【问题标题】：Overlap Collapse/expand content in frameset重叠折叠/展开框架集中的内容
【发布时间】：2016-01-08 03:41:12
【问题描述】：

如何在框架集中重叠显示折叠/展开的内容（我不希望缩短顶部框架细节）？我使用 3 帧框架集（顶部框架、左框架和右框架），并且无法使这个东西工作（为重叠顶部框架集中的扩展内容而制作的脚本，例如 z-index 逻辑）。有可能做出这种改变吗？请给一些建议。谢谢

框架集页面

<html>
<FRAMESET rows="18%,*" frameborder="YES"> 
  <frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
  <frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
  <frame src="frame_c.htm">
</frameset>
</html>

框架页面

<HTML>

  <HEAD>

    <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script language="JavaScript" src="/home/common/popup/popup.js"></script>
    <TITLE>headerFrame.jsp</TITLE>
  </HEAD>    
  <BODY>
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <tr>
          <td width="15% " align="center">TOP FRAME</td>
          <td width="40% " align="left " >TOP FRAME</td>
          <td width="45% " >TOP FRAME</td>
        </tr>
      </table>
    </form>
  </BODY>

</HTML>

当前系统布局的屏幕截图。

但是当我点击展开链接时，所有顶部框架的细节都会被缩短。如何使扩展的细节布局与顶框重叠？

预期输出：

【问题讨论】：

标签： html css frame expand

【解决方案1】：

"请给点建议"

停止使用框架：HTML5 不支持它们。

在需要表格时使用表格。请勿将表格用于布局目的。

始终指定docytpe。

HTML 标记使用小写（如果需要，也可以使用大写，但不要混合使用）

将此列表作为推荐而不是批评。我也犯了这些错误。

正如您在问题中提到的，这可以通过z-index 解决。您面临的问题可以通过使两个表都具有绝对位置（与左上角对齐）并为第一个表提供比第二个表更高的z-index 来解决：

<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script language="JavaScript" src="/home/common/popup/popup.js"></script>
    <TITLE>headerFrame.jsp</TITLE>
  </HEAD>    
  <BODY>
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <tr>
          <td width="15% " align="center">TOP FRAME</td>
          <td width="40% " align="left " >TOP FRAME</td>
          <td width="45% " >TOP FRAME</td>
        </tr>
      </table>
    </form>
  </BODY>

</HTML>

【讨论】：

谢谢@Alvaro Montoro，感谢您的推荐和解决方案！