Question

我有一个div是绝对的位置导致进程内容坐在它上面这是可以理解的，我想知道如何让div保持为位置：绝对但内容仍然继续，好像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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使位置绝对元素看起来仍然在文档流中？

1 个答案: