позиція: родич залишає порожній простір

Код знаходиться тут: 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 {
  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>

Найкраще рішення, якщо ви не хочете залишати пробіли внизу (відносно)

Полягає у використанні поля зверху та положення: липке

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