posisi: relatif menyisakan ruang kosong

Kode ada di sini: http://lasers.org.ru/vs/example.html

Bagaimana cara menghapus ruang kosong di bawah blok utama (#halaman)?

Nah, jangan gunakan posisi relatif. Elemen tersebut masih menempati ruang tempat asalnya saat menggunakan pemosisian relatif, dan Anda tidak dapat menghilangkannya. Misalnya, Anda dapat menggunakan pemosisian absolut, atau membuat elemen mengapung di samping satu sama lain.

Saya bermain-main dengan tata letak sedikit, dan saya sarankan Anda mengubah tiga aturan ini menjadi:

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

Trik lain yang bekerja dengan baik bagi saya adalah menggunakan margin-bottom negatif di elemen relatif yang telah Anda pindahkan. Tidak perlu melakukan pemosisian absolut.

Sesuatu seperti:

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

Mirip (jika tidak identik) dengan solusi yang saya lihat sekarang, dari hijau.

Coba aturan ini:

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

Saya mengubah posisi menjadi absolut, ini memungkinkan Anda untuk menggunakan bottom: 0properti.

#page {
  padding-bottom: 0;
}

Saya punya masalah serupa. Cara termudah adalah dengan mengganti atas pada margin-topuntuk #page.

Saya memiliki masalah yang sama. Margin negatif tidak berhasil untuk saya karena meninggalkan area putih besar di tempat sebelumnya. Saya memecahkan masalah ini dalam kasus saya dengan memasukkan ketinggian secara manual.

.maincontent {
    height: 675px;
}

Jawaban saya terlambat tetapi dapat membantu orang lain dengan masalah serupa yang saya alami.

Aku punya <div>dengan position: relative;mana semua elemen anak memiliki position: absolute;gaya. Ini menyebabkan sekitar 20px ruang putih muncul di halaman saya.

Untuk menyiasati hal ini saya menambahkan margin-top: -20px;elemen sibling berikutnya setelah <div>with position: relative;.

Jika sebelumnya Anda memiliki elemen saudara, Anda dapat menggunakan 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>

Saya bisa menghilangkan spasi menggunakan kerangka kerja berikut:

Dan inilah markupnya

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

Pertanyaan ini tampaknya dijawab dengan baik - namun semua jawaban di atas memiliki efek samping yang buruk dalam tata letak saya. Inilah yang benar-benar berhasil bagi saya:

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

Solusi terbaik jika Anda tidak ingin meninggalkan spasi di bawah (relatif)

Apakah menggunakan margin-top dan position: sticky

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