position: relative laisse un espace vide

Le code est ici: http://lasers.org.ru/vs/example.html

Comment supprimer un espace vide sous le bloc principal (#page)?

Eh bien, n'utilisez pas de positionnement relatif alors. L'élément occupe toujours de l'espace là où il était à l'origine lors de l'utilisation du positionnement relatif, et vous ne pouvez pas vous en débarrasser. Vous pouvez par exemple utiliser le positionnement absolu à la place ou faire flotter les éléments les uns à côté des autres.

J'ai un peu joué avec la mise en page et je vous suggère de changer ces trois règles pour:

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

Une autre astuce qui a bien fonctionné pour moi est d'utiliser une marge inférieure négative dans l'élément relatif que vous avez déplacé. Pas besoin d'aller avec un positionnement absolu.

Quelque chose comme:

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

Similaire (sinon identique) à la solution que je vois maintenant, du vert.

#page {
  padding-bottom: 0;
}

Essayez cette règle:

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

J'ai changé de position en absolu, cela vous permet d'utiliser la bottom: 0propriété.

J'avais un problème similaire. Le moyen le plus simple est de remplacer le dessus margin-toppar #page.

J'ai eu le même problème. La marge négative n'a pas fonctionné pour moi car elle a laissé une zone blanche massive là où elle se trouvait. J'ai résolu ce problème dans mon cas en entrant manuellement la hauteur.

.maincontent {
    height: 675px;
}

Ma réponse est tardive, mais cela peut aider d'autres personnes avec un problème similaire que j'ai eu.

J'ai eu un <div>avec position: relative;où tous les éléments enfants ont le position: absolute;style. Cela a fait apparaître environ 20 pixels d'espace blanc sur ma page.

Pour contourner cela, j'ai ajouté margin-top: -20px;à l'élément frère suivant après le <div>avec position: relative;.

Si vous avez déjà un élément frère, vous pouvez utiliser 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>

J'ai pu me débarrasser des espaces blancs en utilisant le framework suivant:

Et voici le balisage

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

Cette question semble avoir bien répondu - cependant toutes les réponses ci-dessus ont eu de mauvais effets secondaires dans ma mise en page. C'est ce qui a vraiment fonctionné pour moi:

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

La meilleure solution si vous ne voulez pas laisser d'espaces en dessous (relatif)

Est d'utiliser margin-top et position: sticky

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