Absolute div goes behind other elements

Question

I have a structure like this:

#article {
  position: relative;
  height: 100%;
}
#special {
  position: absolute;
  bottom: 0%!important;
  top: 100%!important;
  width: 100%;
}

<section>
  <div id="article">
    <div>...</div>
    <div id="special">...</div>
    <div>...</div>
  </div>
</section>
<section>
  <div></div>
</section>

I place article div as position:relative and special div as position:absolute and top:100%. It goes at the end of article div but it seems that it has no height at all and shows below the below section. I added height attribute to special div and height:100% to article div with no success.

How can I force section div to occupy actual space? I tried to place an after element to special div to clear:both but no success.

check this link:-http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space — Razia sultana, Oct 12 '16 at 15:29
What are you actually trying to do? If you could provide us with a fiddle or at least the source code (including CSS) then we could try and help you out a little more. — Damien, Oct 12 '16 at 15:30
I have in div with id=article some divs one of them has id=special. I need this div placed in bottom of all and i have to do it through css and no html repositioning. I place it but it goes below the next section and like it does not occupy any height — Stavros B, Oct 12 '16 at 15:34
I added a Stack Snippet in an effort to show you how the code you've provided does not help anyone answer your question. Please edit the snippet to include enough code to show your problem. See [mcve]. — Heretic Monkey, Oct 12 '16 at 15:39
Get rid of your `top:100!important` line, if you want it to be at the bottom of the `
` div, you only need the `bottom:0` line. — Lee, Oct 12 '16 at 15:42
Check here: http://sisterhoodk.gr/index.php/blog-dynamic/32-10-stylish-looks-for-winter at bottom to see the comment form that it gets behind the below div — Stavros B, Oct 12 '16 at 16:57

score 0 · Answer 1 · answered Oct 12 '16 at 15:43

When using absolute positioning, you don't need to include both top and bottom usally.

#article {
  position: relative;
  height: 100px; // Example just to show you a bit clearer.
}
#special {
  position: absolute;
  bottom: 0;
  /* top: 100%!important; */ // Don't need this line
  width: 100%;
}

score 0 · Accepted Answer · answered Oct 12 '16 at 19:26

I finally did this with jquery like this:

jQuery("#jc").insertAfter(".openSocialShareHorizontalSharing");

where #jc the div that i move below div with class openSocialShareHorizontalSharing

Although, if anyone could post a valid answer using CSS, please check the link from the comment from first post

Absolute div goes behind other elements

2 Answers2