Position: relative оставляет пустое пространство

Ответ 1

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

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

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

Ответ 2

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

Что-то вроде:

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

Аналогично (если не идентично) решению, которое я вижу сейчас, от зеленого.

Ответ 3

#page 
{ 
     overflow:hidden; 
}

Ответ 4

#page {
  padding-bottom: 0;
}

Ответ 5

Попробуйте следующее правило:

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

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

Ответ 6

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

.maincontent {
    height: 675px;
}

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

Этот вопрос, кажется, хорошо ответил - однако все ответы выше имели плохие побочные эффекты в моем макете. Это то, что действительно сработало для меня:

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

Ответ 10

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

У меня был <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>