position: relative оставляет пустое место

Код здесь: http://lasers.org.ru/vs/example.html

Как убрать пустое место под основным блоком (# страница)?

Тогда не используйте относительное позиционирование. Элемент по-прежнему занимает место там, где он был изначально при использовании относительного позиционирования, и вы не можете от этого избавиться. Вы можете, например, использовать вместо этого абсолютное позиционирование или заставить элементы плавать рядом друг с другом.

Я немного поигрался с макетом и предлагаю вам изменить эти три правила на:

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

Другой трюк, который у меня отлично сработал, - использовать отрицательное поле margin-bottom в относительном элементе, который вы переместили. Нет необходимости использовать абсолютное позиционирование.

Что-то типа:

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

Подобно (если не идентично) решению, которое я вижу сейчас, зеленым цветом.

#page {
  padding-bottom: 0;
}

Попробуйте это правило:

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

Я изменил позицию на абсолютную, это позволяет использовать bottom: 0свойство.

У меня была аналогичная проблема. Самый простой способ заменить сверху на margin-topдля #page.

Я была такая же проблема. Отрицательная маржа не сработала для меня, так как оставила огромную белую область там, где она была раньше. В моем случае я решил эту проблему, введя высоту вручную.

.maincontent {
    height: 675px;
}

Мой ответ запоздал, но он может помочь другим с аналогичной проблемой, которая была у меня.

Я был <div>с , position: relative;где все дочерние элементы имеют position: absolute;стиль. В результате на моей странице появилось около 20 пикселей белого пространства.

Чтобы обойти это, я добавил 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>

Мне удалось избавиться от пробелов, используя следующую структуру:

А вот разметка

<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>

Лучшее решение, если вы не хотите оставлять пробелы внизу (относительные)

Использовать margin-top и position: sticky

#page {
     margin-top: -280px;
     position: sticky;
}