CODEWITHSUNDEEP
css
styler
styler

Reputation: 16501

Make a position absolute element appear like it is still in the document flow?

I have a div which is position absolute causing the proceeding content to sit over it which is understandable, I was wondering how I can have the div remain as position: absolute but have the content continuing as if the div was still in the document flow? Would this call for a padding bottom trick on the absolute content?

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/

Upvotes: 0

Views: 71

Answers (1)

tao
tao

Reputation: 90188

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>

Upvotes: 1

Related Questions