css - 使位置绝对元素看起来像仍在文档流中一样？

Question

我有一个 div，它是绝对位置，导致后续内容位于它上面，这是可以理解的，我想知道如何让 div 保持 position: absolute 但让内容继续，就好像 div 仍在文件流？这是否需要对绝对内容进行填充底部技巧？

HTML

    <div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet provident aperiam consequuntur veniam repellendus eaque repudiandae, modi architecto aut fugit esse nostrum quidem quo molestiae quasi! Sed facilis, molestias perspiciatis.</p>

  <div class="absolute">
    <h2>Position absolute content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio hic quidem vero tenetur ad mollitia voluptas libero, voluptates dolore quasi doloremque id cum! Facilis qui similique facere commodi quisquam.</p>
  </div>

  <div>
    <h2>Heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas non dolor facilis natus nam. Voluptas commodi illum aut quasi voluptatibus cupiditate doloribus at officia voluptates. Reiciendis placeat delectus repellendus.</p>
  </div>
</div>

CSS

.absolute {
  position: absolute;
}

JsFiddle:https://jsfiddle.net/mz41jzqd/

Answer 1

function updateTopMargin(){
  var abs = $('.absolute').eq(0);
  abs.next().css({'margin-top':abs.outerHeight()+'px'});
}
$(window).on('load resize', updateTopMargin);
$('.absolute').on('resize', updateTopMargin);

.absolute {
  position: absolute;
}
.absolute + * {
  padding-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet provident aperiam consequuntur veniam repellendus eaque repudiandae, modi architecto aut fugit esse nostrum quidem quo molestiae quasi! Sed facilis, molestias perspiciatis.</p>

  <div class="absolute">
    <h2>Position absolute content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio hic quidem vero tenetur ad mollitia voluptas libero, voluptates dolore quasi doloremque id cum! Facilis qui similique facere commodi quisquam.</p>
  </div>

  <div>
    <h2>Heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas non dolor facilis natus nam. Voluptas commodi illum aut quasi voluptatibus cupiditate doloribus at officia voluptates. Reiciendis placeat delectus repellendus.</p>
  </div>
</div>