0

I visit Stackoverflow all the time for answers (great resource), but this is my first question.

I have 2 divs I need rendered 1 above the other. Should be very simple and I have done this many times. My problem is that it renders opposite. Instead of: div1 div2 I am getting: div2 div1

Been pulling my hair out for hours now. Div1 is a jQuery jump menu Div2 is a jQuery accordian list. I display them via the show/hide method:

        $("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");

        });

Jump Menu:

<!-- 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 -->

FAQ List:

<!-- 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 -->

I don't see anything unusual or out of the ordinary in the css either.

Other div's seem to show in the proper order.

Any ideas?

Thx

4

2 に答える 2

0

間違った順序や場所などで表示される場合は、CSS の問題である可能性が非常に高くなりますが、それが含まれていないため、分析が困難です。

通常、他の div の上に div を表示する場合は、相対位置の div 内に div を絶対配置して表示できます。

ここで「位置」属性の仕様を見つけることができます:

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

デフォルトは「position: static」であるため、必要な機能を得るにはそれをオーバーライドする必要があります。それらが順不同で表示される場合は、"float" が使用されている可能性があります。

ただし、CSS がないと、これを判断するのは非常に困難です。jQuery は指定したとおりに描画しますが、描画する場所は CSS が制御します。

于 2013-04-26T21:57:25.620 に答える