Css 动态元素向下推动其他div的div

所以，我有一个困境。我的标签正在向下推它下面的内容。下面是一些代码：

<div id="navigation">
    <div id="test" class="blue">
 <p><a href="<? echo $web_app_path ?>home.php">Home</a></p>
<p class="subtext">View/update contact information</p>
    </div>
    <div id="lessons" class="blue">
 <p><a href="<? echo $web_app_path ?>projects.php">Projects</a></p>
<p class="subtext">Create/open projects, view existing reports</p>
    </div>
 <div id="test" class="blue">
 <p><a href="<? echo $web_app_path ?>help.php">Help</a></p>
<p class="subtext">If something doesn't work, click here</p>
    </div>
</div>

 <div id="contain3">
  <table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
                <tr>
                    <td cellspacing="0" cellpadding="0" align="center"  valign="top">
   <br>
   <!--template up-->
   <!--side bar table below -->
    <? include_once("sidebar.php"); ?>
    </td>
    <td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
    <table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
    <tr>
    <td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
    <div align="center" id="content" style="vertical-align: top;"></div>        
    </td>
    </tr>

   </table>
   <!--template down-->
   </div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?

 include('template/footer_tmpl.php');
 ?>  

</td>
</tr>
</table>
</div>

要了解我在说什么，我的网站是：-点击上面的标签。不要介意网站的速度慢，这是一个服务器问题。。。因此，您必须等待几秒钟才能初始化选项卡

---

另外，正如你所看到的，我注释掉了绝对位置。我原以为这就是答案，但实际上，它只是把tab div放在内容的顶部。。。请帮帮我，这让我头疼

与其将类为“blue”的div调高，从而显示下拉列表，不如将类为“subtext”的段落显示出来

---

将它们设置为显示：默认为无，并使用JavaScript显示它们。您还需要将它们设置为position:absolute，这样它们就不会向下推送任何内容。

好的，我解决了这个问题。我确定了位置：绝对，然后是边距上限：27px，这将content div向下推到了我想要的位置。然而，另一个问题出现了，这与IE有关。不过，我会为它启动一个新线程，因为这是一个新问题。谢谢

请修复您的帖子，使代码正确布局。很抱歉。。修复了大部分问题。我现在正在修复css代码我面临的问题是，我正在使用jquery作为bownce的下拉列表。如果执行显示：隐藏；，然后show（），我不确定我是否还能有同样的效果。另外，当我这样做时，position absolute，tab div放在content div的顶部。不确定您是否能够访问该站点的beta版本，但它是：-并且在该站点上，位置是绝对的。如果您想要.blue和.subtext的css，请告诉我。只在subtext项上设置position absolute，这样tab div就不会放在content div的顶部。您应该能够使用jQuery执行与当前相同的操作，而是使用subtext项。你可以做一些事情，比如滑下、滑出等。

#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
    }

#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;  
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}