Question

我一直访问Stackoverflow寻求答案（很棒的资源），但这是我的第一个问题。

我有2个div，我需要在另一个上面渲染1。应该很简单，我已经做了很多次。我的问题是它呈现相反的情况。代替： DIV1 DIV2 我正进入（状态： DIV2 DIV1

现在已经把头发拉了几个小时。 Div1是一个jQuery跳转菜单 Div2是一个jQuery手风琴列表。我通过show / hide方法显示它们：

        $("a[id='faq_link']").click(function(){
        $("div[id='agent-buynow-form']").hide();
        $("div[id='mid-header']").hide();
        $("div[id='jump-menu']").hide();
        $("div[class='cat']").hide();
        $("div[id='cat-home']").hide();
        $("div[id='agent-page-header']").hide();
        $("div[id='agent-page-menu']").hide();
        $("div[id='agent-page-main']").hide();
        $("div[id='agent-page-commissions']").hide();
        $("div[id='agent-page-buycard']").hide();
        $("div[id='agent-page-buybulk']").hide();
        $("div[id='agent-page-newsletter']").hide();
        $("div[id='agent-page-offers']").hide();
        $("div[id='buynow-form']").hide();
        $("div[id='archive-list']").hide();

        $("div[id='jump-menu']").show();
        $("div[id='faq-list']").show();
        $('html, body').animate({ scrollTop: $('#faq-list')}, 'slow');          
//          alert("FAQ clicked");

        });

跳转菜单：

<!-- Begin Jump Menu -->
<div id="jump-menu" class="top">
<table align="left" border="1px" cellpadding="2" cellspacing="2">
<tr>
    <td>
    Categories
</td>
<td>
    Current:
</td>
<td>
<div id="selection">
<select name="jumpMenu" id="jumpMenu">
    <option value="#cat-home" selected="selected">Home</option>
    <option value="#cat-dining">Dining</option>
    <option value="#cat-shows">Shows</option>
    <option value="#cat-tours">Tours</option>
    <option value="#cat-nightlife">Nightlife</option>
    <option value="#cat-shopping">Shopping</option>
    <option value="#cat-attractions">Attractions</option>
    <option value="#cat-golf">Golf</option>
    <option value="#cat-transportation">Transportation</option>
    <option value="#cat-spas">Spas</option>
    <option value="#cat-sports">Sports</option>
    <option value="#cat-events">Special Events</option>
    <option value="#cat-weddings">Weddings</option>

</select>
</div>
</td>
</tr>
</table>
</div>
<!-- End Jump Menu -->

常见问题列表：

<!-- Begin FAQ list -->
<div id="faq-list" style="display:none;">
<table>
<tr>
<td style="height:131px; line-height:15px; padding-left:5px; padding-right:5px;">
<div align="center"><B>--- FREQUENTLY ASKED QUESTIONS --- </B> </div>

<div id="accordion">
  <content>
    Does the ******* Card expire?
  </content>
  <div>
    Yes, all ******* Cards are valid one year from the date of purchase.
  </div>

  <content>
    How many places accept this card?  
  </content>
  <div>
    We currently have over 500 merchan
  </div>
  <content>
    How do I use my card?  
</content>
<div>
    Simply present your *********** at  
</div>
<content>
    What if I am traveling to ******** and do not have time for a card to be mailed to me?  
</content>
<div>
    When purchasing your card simp    
</div>
<content>
    Do the discounts change or will they always be the same?  
</content>
<div>
    We are continually adding new 
</div>
<content>
    Can I buy more than one card?  
</content>
<div>
    Yes, you can buy as many *****
</div>
<content>
    If the card is lost or stolen, can it be replaced?  
</content>
<div>
    Lost or stolen cards less than one year old can be replaced for the cost of shipping.   
</div>
<content>
    What do I do when my card expires?  
</content>
<div>
    Unfortunately, each ***** only   
</div>
<content>
    How long is each offer valid?  
</content>
<div>
    The merchants that provides
</div>
<content>
    Do I have to book things ahead of time?  
</content>
<div>
    You do not have to book in   
</div>
<content>
    Is there a customer service number people can call?  
</content>
<div>
    Yes, your card comes with our Customer service number.  
</div>
<content>
    Can locals use the card too?  
</content>
<div>
    Yes, locals are welcome to use the card as well.  
</div>
<content>
    Can I get a discount for my entire party?  
</content>
<div>
    For dinner reservations,    
</div>
</div>    
</td>
</tr>
</table>
</div>
<!-- End FAQ -->

我也没有在css中看到任何异常或异常。

其他div似乎以正确的顺序显示。

有什么想法吗？

THX

Answer 1

如果事情以错误的顺序，位置等方式出现，很可能是CSS问题，但由于不包括在内，因此难以分析。

通常情况下，如果你想在其他div之上显示div，你可以在相对位置div内部使用div的绝对定位。

您可以在此处找到“position”属性的规范：

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

由于默认值为“position：static”，您可能需要覆盖它以获得所需的功能。如果它们不按顺序显示，则可能是使用“浮动”的结果。

但是，如果没有CSS，这很难确定。 jQuery将绘制你告诉它的内容，但CSS控制它绘制它的位置。

Answer 2

我知道jQuery UI的手风琴为元素添加了一些浮动样式，使其显示在另一个div之上。使用！important或Tinker覆盖这些，使用最小宽度进行第一次潜水，以使其正确显示。

Div渲染上面（不在顶部）另一个Div

2 个答案: