pozycja: względna pozostawia puste miejsce

Kod jest tutaj: http://lasers.org.ru/vs/example.html

Jak usunąć puste miejsce pod głównym blokiem (#strona)?

Więc nie używaj pozycjonowania względnego. Element nadal zajmuje miejsce w miejscu, w którym był pierwotnie podczas korzystania z pozycjonowania względnego, i nie można się tego pozbyć. Możesz na przykład zamiast tego użyć pozycjonowania bezwzględnego lub sprawić, by elementy unosiły się obok siebie.

Bawiłem się trochę układem i proponuję zmienić te trzy zasady na:

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

Inną sztuczką, która działała dobrze, jest użycie ujemnego dołu marginesu we względnym elemencie, który przesunąłeś. Nie ma potrzeby stosowania pozycjonowania absolutnego.

Coś jak:

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

Podobne (jeśli nie identyczne) do rozwiązania, które widzę teraz, od zielonego.

Wypróbuj tę regułę:

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

Zmieniłem pozycję na bezwzględną, co pozwala na korzystanie z bottom: 0nieruchomości.

#page {
  padding-bottom: 0;
}

Miałem podobny problem. Najprostszym sposobem jest zastąpienie na górę margin-topdo #page.

Miałem ten sam problem. Ujemny margines nie działał w moim przypadku, ponieważ pozostawiał ogromny biały obszar w miejscu, w którym był. Rozwiązałem ten problem w moim przypadku ręcznie wpisując wysokość.

.maincontent {
    height: 675px;
}

Moja odpowiedź jest spóźniona, ale może pomóc innym z podobnym problemem, który miałem.

Miałem <div>z, position: relative;gdzie wszystkie elementy potomne mają position: absolute;styl. Spowodowało to, że na mojej stronie pojawiło się około 20 pikseli białego miejsca.

Aby obejść ten problem, dodałem margin-top: -20px;do następnego elementu rodzeństwa po <div>with position: relative;.

Jeśli masz wcześniej element rodzeństwa, możesz użyć 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>

Udało mi się pozbyć białych znaków za pomocą następującego frameworka:

A oto znaczniki

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

Wydaje się, że odpowiedź na to pytanie jest dobra - jednak wszystkie powyższe odpowiedzi miały złe skutki uboczne w moim układzie. Oto, co naprawdę zadziałało dla mnie:

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

Najlepsze rozwiązanie, jeśli nie chcesz zostawiać spacji poniżej (względne)

Czy użyć marginesu góry i pozycji: lepka

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