DIV를 다른 Divs 위에 표시하는 방법

Question

jsFiddle에서 코드를 업로드합니다. 거기에서 볼 수 있습니다. 당신이 링크를 클릭하면

http://jsfiddle.net/SrT2U/2/

는 숨겨진 FAQ 섹션이 표시됩니다, 그것은 아래로 다른 div를 밀어 것입니다. 그러나 그것은 내가 원하는 것만은 아니며, 다른 모든 div가 있어야하며, 숨겨진 FAQ 섹션이 맨 위에 뜬다. 그것을하는 방법을 모르십시오. 이것이 HTML, CSS 또는 jQuery에서 수행되어야하는지조차 확실하지 않습니다.

내 jQuery 코드 :

$(function(){ 
    $(".OpenTopMessage").click(function() { 
     $("#details").slideToggle("slow"); 
    }); 
}); 

HTML 코드 :

<div style="border: 1px solid #000;"> 
    <span>link</span> 
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> 
    <span>link</span> 
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> 
    <span>link</span> 
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> 
    <span>link</span> 
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> 
    <span>link</span> 
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> 
</div> 

<div id="faqBox"> 
    <table width="100%"> 
<tr><td><a href="#" id="openFAQ" class="OpenTopMessage">this is hte faq section</a></td> 
</tr> 
    </table> 

    <div id="details" style="display:none"> 
    <br/><br/><br/><br/><br/><br/><br/><br/> 
the display style property is set to none to ensure that the element no longer affects the layout of the page 
<br/><br/><br/><br/><br/><br/><br/><br/> 
    </div> 
</div> 
<br/><br/> 
<div style="background:#c00;">other stuff heren the height reaches 0 after a hiding animation, the display style property is set to </div> 

Answer 1

#details div에 position:absolute을 사용할 수 있습니다.

예 : 당신이 줄을 얻기 위해 margin 바이올린해야http://jsfiddle.net/SrT2U/9/

.

---

편집 : 당신이 자주 묻는 질문 상자를 중앙에 margin:0 auto;을 사용하는 알았어. 상자를 정렬하려면 다른 방법을 찾아야 할 수도 있습니다.

---

편집 2 : 당신이 #faqbox 테이블 내부의 자주 묻는 질문 DIV를 배치하고 #details 사업부에 margin-top: 20px; margin-left:-16px;에 margin:0 auto;을 변경하고 모든 것이 잘 작동하는지 눈치

.

예 2 :http://jsfiddle.net/SrT2U/13/

NB : 그래서 SPEC에 코드가 아닙니다, 그러나 FAQ를 중심으로 재 작업을 수행처럼 table 내부의 div을 배치.

Answer 2

쉬운 수정은 당신의 faqBox의 DIV에 position:absolute를 추가하는 것입니다.

Position:absolute

jsFiddle example

문서의 흐름에서이 경우에 요소를 가져가 다른 요소의 상단에 표시하고 아래로 밀어 넣지 수 있습니다.

Answer 3

다른 사람의 위치를 ​​변경하지 않고 div를 다른 요소 위에 표시하려면 위치의 CSS 속성을 absolute로 설정해야합니다.당신의 CSS 파일에서

는 다음과 같이 지정합니다

#details{ 
    position: absolute; 
    left: 100px;//your desired position as regard to the left of your window 
    top: 100px;//your desired position as regard to the top of your window 
} 

당신도 할 수 있습니다 그 다음으로 jQuery를 사용하여 :

$(".OpenTopMessage").click(function() { 
    $("#details").slideToggle("slow"); 
    $("#details").css("position", "absolute"); 
    $("#details").css("left", "40px/*some value*/"); 
    $("#details").css("top", "40px/*some value*/"); 
}); 

여전히 센터에 팝업 상자를 찾으려면 jQuery를 사용하여 다음과 같이 가운데에 배치 할 수 있습니다.

$(".OpenTopMessage").click(function() { 
    $("#details").slideToggle("slow"); 
    $("#details").css("position", "absolute"); 
    window_width = $(window).width(); //Get the user's window's width 
    window_height = $(window).height(); //Get the user's window's height 
    $("#details").css("left", (window_width-$("#details").width())/2); 
    $("#details").css("top", (window_height-$("#details").height())/2); 
}); 

상자가 중앙에 배치됩니다.

또한, 당신은 아마 당신의 버튼을 당신의 사업부에 의해 덮여 "이 했나 FAQ 섹션은"발견 할 것이다, 그러나 당신은 쉽게 닫기 버튼을 추가하여 팝업 상자를 닫지 사용하거나 다음 코드를 추가 할 수 있습니다

을

$("body:not(#details)").click(function() { 
    $("#details").slideToggle("slow"); 
}); 

이렇게하면 페이지의 일부를 클릭하여 div 자체를 제외한 대상 div # 세부 정보를 닫을 수 있습니다. 당신이 팝업 창 또는 대화 상자를 만들려고 노력하는 경우

일반적으로, 당신은 이전 만 대화 상자를 지원하는의 jQuery를 UI (http://jqueryui.com/dialog/) 또는 blockUI (http://www.malsup.com/jquery/block/)를 포함하여 다른 미리 디자인 된 플러그인을 사용하려고 할 수 있습니다 후자는 모든 종류의 팝업 상자를 지원합니다.