刪除一個元素佔據的空間而不隱藏它

Question

我知道我可以隱藏一個元素而不用刪除它將佔用的空間，使用visibility: hidden。我想要做的是完全相反的：我想渲染頁面的其餘部分，就好像元素不在頁面上，但保持元素可見。

我問的原因是因爲我有一個居中的950像素寬的佈局，我想在屏幕左側添加一個小框。它看起來有點像這樣：

現在我有一個<div>持有該邊箱的頂部元素在我的950像素頁的包裝，這也是一個<div>。對於已應用position: relative和left: -200px（框寬）的側邊框將其移動到側邊，但仍然會讓我將主要內容壓下。我是否正確地處理了這個問題？有沒有合理的方法去除側箱留下的垂直空間？

Answer 1

只需使用position: absolute;。該元素將不再是文檔流程的一部分，並且您可以將其定位爲相對於其最近的非static盟友定位的祖先。

Answer 2

位置相對仍將佔據空間。嘗試位置：絕對;它會將元素完全放置在其父項中，但最重要的是它的所有兄弟。