Jquery slidedown显示在其他内容之上

Question

我有一段内容，我只想在上面显示其他代码，使用 Jquery slidedown 作为覆盖。我已经添加了 z-index 属性，但无法使其正常工作。

我希望类为“selection_nip”的 div 显示为类“”之上的覆盖层

对于任何错误的格式，我们深表歉意。

HTML代码

    <div id="ask_question_post_envelop" class="bottom_border_radius" style="position:relative; z-index:10;">

                <div class="selection_nip" style="display:none; position:relative; z-index:1000;"></div>
                    <span id="arrow-dashboard" class="arrow-dashboard"></span>
                    <div id="avatar-wraper" class="avatar-wraper">
                        <a href="#" class="post-avatar" id="" ><img id="avatar-img" src="<?php echo $user_data['photo'];?>" border="0" alt=""></a>
                    </div>  

                    <div id="form_wrapper_question" class="form_wrapper_question" >
                        <!--    ONDE ENTRAM TODAS AS FORMS         -->  
                </div>



                <div id="" class="question-page-form_wrapper" name="profile_identifier" style="position:relative; z-index:10;">
                    <div style='height: 0px;width: 0px; overflow:hidden;'>
                        <input id="profile_id" type="text" name="profile_id" value="<?php echo $profile_data['user_id']; ?>"/>
                    </div>
               </div>
   </div>

Answer 1

您需要将 div "selection_nip"定位到 absolute 位置。

#selection_nip {
    position: absolute;
    top: 0px;
    left: 0px;
}

它将定位在 div #ask_question_post_envelop 内容的顶部(具有相对位置的第一个父级)。

你会得到这样的东西: Fiddle