vị trí: tương đối để lại một không gian trống

Mã ở đây: http://lasers.org.ru/vs/example.html

Làm thế nào để loại bỏ một không gian trống trong khối chính (#page)?

Vậy thì, đừng sử dụng định vị tương đối. Phần tử vẫn chiếm dung lượng ở vị trí ban đầu khi sử dụng định vị tương đối và bạn không thể loại bỏ điều đó. Ví dụ, bạn có thể sử dụng định vị tuyệt đối để thay thế hoặc làm cho các phần tử nổi bên cạnh nhau.

Tôi đã thử với bố cục một chút và tôi khuyên bạn nên thay đổi ba quy tắc sau thành:

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

Một thủ thuật khác hiệu quả đối với tôi là sử dụng đáy âm trong phần tử tương đối mà bạn đã di chuyển. Không cần phải đi với định vị tuyệt đối.

Cái gì đó như:

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

Tương tự (nếu không giống) với giải pháp tôi thấy bây giờ, từ màu xanh lá cây.

#page {
  padding-bottom: 0;
}

Hãy thử quy tắc này:

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

Tôi đã thay đổi vị trí thành tuyệt đối, điều này cho phép bạn sử dụng thuộc bottom: 0tính.

Tôi đã có một vấn đề tương tự. Cách đơn giản nhất là thay thế top on margin-topfor #page.

Tôi gặp vấn đề tương tự. Lề âm không phù hợp với tôi vì nó để lại một vùng trắng lớn như trước đây. Tôi đã giải quyết vấn đề này trong trường hợp của mình bằng cách nhập chiều cao theo cách thủ công.

.maincontent {
    height: 675px;
}

Câu trả lời của tôi là muộn nhưng nó có thể giúp những người khác về vấn đề tương tự mà tôi đã gặp phải.

Tôi đã có một <div>với position: relative;nơi mà tất cả các yếu tố trẻ có position: absolute;phong cách. Điều này gây ra khoảng 20px khoảng trắng xuất hiện trên trang của tôi.

Để giải quyết vấn đề này, tôi đã thêm vào margin-top: -20px;phần tử anh chị em tiếp theo sau <div>với position: relative;.

Nếu bạn có một phần tử anh chị em trước đó, bạn có thể sử dụng 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>

Tôi đã có thể loại bỏ các khoảng trắng bằng cách sử dụng khung sau:

Và đây là đánh dấu

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

Câu hỏi này dường như đã được trả lời tốt - tuy nhiên tất cả các câu trả lời ở trên đều có tác dụng phụ xấu trong bố cục của tôi. Đây là những gì thực sự hiệu quả với tôi:

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

Giải pháp tốt nhất nếu bạn không muốn để lại khoảng trống bên dưới (tương đối)

Là sử dụng margin-top và vị trí: dính

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