요소가 숨지 않고 차지하는 공간 제거

Question

visibility: hidden을 사용하여 공간을 제거하지 않고 요소를 숨길 수 있다는 것을 알고 있습니다. 내가하고 싶은 일은 정반대입니다 : 페이지의 다른 부분을 페이지에 렌더링하는 것처럼 보이게하지만 요소를 계속 볼 수있게하려고합니다.

화면 왼쪽에 작은 상자를 추가하려는 가운데 배치 된 950 픽셀 레이아웃이 있기 때문에 내가 묻는 이유가 있습니다. 그것은 다음과 같이 좀 보일 것이다

는 지금은 또한 <div> 내 950 픽셀 페이지 래퍼에서 최고의 요소로 측면 상자를 보유하고 <div> 있습니다. 측면 상자에 나는 position: relative과 left: -200px (상자 너비)을 적용하여 옆으로 옮기지 만 여전히 주요 내용이 푸시 다운 된 상태로 남겨 둡니다. 문제에 올바르게 접근하고 있습니까? 사이드 박스에 남겨진 수직 공간을 제거하는 논리적 인 방법이 있습니까?

Answer 1

그냥 position: absolute;을 사용하십시오. 이 요소는 더 이상 문서 플로우의 일부가 아니며, 가장 가까운 위치에있는 가장 가까운 상위 요소에 상대적으로 배치 할 수 있습니다.

Answer 2

상대적인 위치는 여전히 공간을 차지합니다. 시도 위치 : 절대; 이 요소는 절대적으로 상위 요소이지만 모든 형제 중 하나에 배치됩니다.