2009-12-12 7 views
2

내 HTML 콘텐츠에 삽입하려는 DIV가 있습니다. 내가 할 때마다, 그 내용은 DIV가 그 내용에 나타난 곳에서 아래로 내려 간다. 그것은 div의 높이를 내려갑니다. 나는 그 위치가 친척으로 설정 되었기 때문에 '나타났습니다'라고 앉았습니다. 여기 왜이 DIV가 HTML 콘텐츠를 아래로 이동합니까?

몇 가지 코드입니다 (나는 말은 DIV가 ID="pop"

<table border="0" align="center"> 
    <tr> 
    <td><div id="pop" style="position:relative; z-index:20; top:100px; left:480px; width:208px; height:52px;"><img src="../Graphics/valj_oxo_komm.png"></div> 
<div class="nav_container" id="nav_container"> 
    <div id="nav_container2" style="position: relative; left: 0%; top: 13%;"> 
     HERE IS ALL THE CONTENT 

와 ONE 일부 CSS IS :

nav_container{ 
width:720px; 
height:180px; 
background-image:blablabla; 
} 

이 더 필요하면 입력이 말해 나는이 Q를 업데이트합니다

실제로 원하는 위치에 div ('pop')를 배치 할 수 있지만 콘텐츠가 아래로 이동하지만 내용을 아래로 이동하지 마십시오. 내 말은, 모든 콘텐츠가 모두 52px 아래로 이동한다는 점을 제외하고는 좋아 보인다.

감사

답변

3

당신이 DIV가의 나머지 부분의 상단에 표시 할 귀하의 사이트의 나머지 부분과 완전히 독립적입니다. 이를 수행하려면 position: relative 대신 position: absolute을 설정해야합니다. 친척은 기본적으로 움직이는 요소를 원래 위치에서 허용하지만 요소가 차지하고 있던 공간은 그대로 있으므로 모든 내용이 귀하의 경우에 아래로 이동 한 것입니다.

position: absolute 요소를 적용하면 요소가 페이지 흐름에서 제외되어 다음 요소가 아래로 내려 가면 안됩니다. 그러나 당신은 올바른 맥락에서 확인하십시오 DIV 번호 팝 이동을해야하지만 약 나중에 걱정 뭔가;)

내 설명이 의미가 희망하지만이 this link useful

+0

아를 찾을 수 있습니다 .. 그것은이었다 예상 .. 완벽한 대답 .. –

1

은 무엇 당신이 설명하는 것은 position: relative의 의도 된 동작입니다.

나는 당신이 달성하지만 position: relativepop 외부 래퍼를 넣어 시도하고 popposition: absolute을주고 싶은 것에 대해 확실하지 않다. 나머지 콘텐츠는 이동하지 않고 pop으로 이동할 수 있습니다.

position: absolute 만 사용하는 경우 위치는 뷰포트의 왼쪽 위 모퉁이를 기준으로하며 테이블의 원하는 것과 다를 수 있습니다.

0

원하는 위치에 div를 배치 할 수있는 기능과 z- 색인을 사용할 수있는 기능을 갖추려면 위치를 '절대'로 설정해야합니다.

0

봅니다 CSS를 아래에 추가하거나 당신이 지정한 최고 크기를 감소 시도 사업부 예 최고 : 만약 내가 제대로 이해 100 픽셀

<style type="text/css"> 
    #pop 
    { 
     display:inline; 
    } 
    </style> 
관련 문제