position : relative는 빈 공간을 남깁니다.

position : relative는 빈 공간을 남깁니다.

---

코드는 여기에 있습니다 : http://lasers.org.ru/vs/example.html

메인 블록 (#page) 아래의 빈 공간을 제거하는 방법은 무엇입니까?

---

그럼 상대 위치를 사용하지 마세요. 요소는 상대 위치를 사용할 때 원래 있던 공간을 여전히 차지하므로 제거 할 수 없습니다. 예를 들어 대신 절대 위치 지정을 사용하거나 요소를 서로 옆에 떠있게 만들 수 있습니다.

나는 레이아웃을 약간 가지고 놀았으며이 세 가지 규칙을 다음과 같이 변경하는 것이 좋습니다.

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

---

저에게 잘 작동하는 또 다른 트릭은 이동 한 상대 요소에 음의 여백 하단을 사용하는 것입니다. 절대 위치를 지정할 필요가 없습니다.

다음과 같은 것 :

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

녹색에서 지금 보는 솔루션과 유사합니다 (동일하지 않은 경우).

---

#page 
{ 
     overflow:hidden; 
}

---

#page {
  padding-bottom: 0;
}

---

이 규칙을 시도하십시오.

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

위치를 절대로 변경하여 bottom: 0속성 을 사용할 수 있습니다.

---

나는 같은 문제가 있었다. 네거티브 마진은 예전에는 거대한 흰색 영역을 남겼 기 때문에 저에게 효과가 없었습니다. 필자의 경우 높이를 수동으로 입력하여이 문제를 해결했습니다.

.maincontent {
    height: 675px;
}

---

비슷한 문제가있었습니다. 가장 쉬운 방법은에 정상을 교체하는 것입니다 margin-top에 대한 #page.

---

다음 프레임 워크를 사용하여 공백을 제거 할 수있었습니다.

그리고 여기에 마크 업이 있습니다.

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

---

이 질문에 대한 답변이 잘 된 것 같습니다. 그러나 위의 모든 답변은 내 레이아웃에 나쁜 부작용이있었습니다. 이것은 정말로 나를 위해 일한 것입니다.

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}

<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

---

내 대답은 늦었지만 비슷한 문제로 다른 사람들에게 도움이 될 수 있습니다.

나는 모든 자식 요소가 스타일을 <div>가진 position: relative;곳을 가졌습니다 position: absolute;. 이로 인해 내 페이지 에 약 20px 의 공백이 나타납니다.

이 문제를 해결하기 위해 with margin-top: -20px;뒤에 다음 형제 요소를 추가 했습니다 .<div>position: relative;

이전에 형제 요소가있는 경우 다음을 사용할 수 있습니다. margin-bottom: -20px;

section {
  height: 200px;
}

<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

참고 URL : https://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space