Stop absolutely positioned div from overlapping text

Question

Here is a simplification of my layout    x000D   x000D       lt div style  position  relative  width 600px   gt  x000D           lt p gt Content of unknown length  but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long lt  p gt  x000D           lt div gt Content of unknown height lt  div gt  x000D           lt div class  btn  style  position  absolute  right  0  bottom  0  width  200px  height  100px background-color  red   gt  lt  div gt  x000D       lt  div gt  x000D   x000D   x000D    The problem I m having is that if the text unknown div content is too long it is overlapping my absolutely positioned div   I have searched the web and SO for a solution and the only one I found suggested putting an invisible div where absolutely positioned div is - trouble is if I could do that I wouldn t need to have the absolutely positioned div in the first place  or am I missing the point here    Can anyone think of a css solution before I go down the jquery route

User · Answer

Short answer  There s no way to do it using CSS only   Long er  answer  Why  Because when you do position  absolute   that takes your element out of the document s regular flow  so there s no way for the text to have any positional-relationship with it  unfortunately   One of the possible alternatives is to float  right  your div  but if that doesn t achieve what you want  you ll have to use JavaScript jQuery  or just come up with a better layout

User · Answer

If you are working with elements of unknown size  and you want to use position  absolute on them or their siblings  you re inevitably going to have to deal with overlap   By setting absolute position you re removing the element from the document flow  but the behaviour you want is that your element should be be pushed around by its siblings so as not to overlap   ie it should flow   You re seeking two totally contradictory things   You should rethink your layout   Perhaps what you want is that the  btn element should be absolutely positioned with respect to one of its preceding siblings  rather than against their common parent   In that case  you should set position  relative on the element you d like to position the button against  and then make the button a child of that element   Now you can use absolute positioning and control overlap

User · Answer

You should set z-index to absolutely positioned div that is greater than to relative div   Something like that   lt div style  position  relative  width 600px  z-index  10   gt       lt p gt Content of unknown length lt  p gt       lt div gt Content of unknown height lt  div gt       lt div class  btn  style  position  absolute  right  0  bottom  0  width  200px  height  100px  z-index  20   gt  lt  div gt   lt  div gt    z-index sets layers positioning in depth of page   Or you may use floating to show all text of unkown length  But in this case you could not absolutely position your div   lt div style  position  relative  width 600px   gt     lt div class  btn  style  float  right  width  200px  height  100px   gt  lt  div gt     lt p gt Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length lt  p gt     lt div gt Content of unknown height lt  div gt     lt div class  btn  style  position  absolute  right  0  bottom  0  width  200px  height  100px   gt  lt  div gt   lt  div gt

User · Answer

Put a z-indez of -1 on your absolute  or relative  positioned element   This will pull it out of the stacking context   I think   Read more wonderful things about  stacking contexts  here  https   philipwalton com articles what-no-one-told-you-about-z-index

User · Answer

x000D   x000D   lt div style  position  relative  width 600px   gt  x000D           lt p gt Content of unknown length lt  p gt  x000D           lt div gt Content of unknown height lt  div gt  x000D           lt div id  spacer  style  width  200px  height  100px  float left  display inline-block  gt  lt  div gt  x000D           lt div class  btn  style  position  absolute  right  0  bottom  0  width  200px  height  100px   gt  lt  div gt  x000D       lt  div gt  x000D   x000D   x000D    This should be a comment but I don t have enough reputation yet  The solution works  but visual studio code told me the following putting it into a css sheet      inline-block is ignored due to the float  If  float  has a value other than  none   the box is floated and  display  is treated as  block     So I did it like this   spacer       float  left      height  20px      width  200px      And it works just as well

User · Answer

Thing which works for me is to use padding-bottom on the sibling just before the absolutely-positioned child  Like in your case  it will be like this    lt div style  position  relative  width 600px   gt       lt p gt Content of unknown length  but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long lt  p gt       lt div style  padding-bottom  100px   gt Content of unknown height lt  div gt       lt div class  btn  style  position  absolute  right  0  bottom  0  width  200px  height  100px background-color  red   gt  lt  div gt   lt  div gt

User · Answer

Thank you for all your answers  Whilst all were correct  none actually solved my problem  The solution for me was to create a second invisible div at the end of the content of unknown length  this invisible div is the same size as my absolutely positioned div  this ensures that there is always a space at the end of my content for the absolutely positioned div  This answer was previously provided here  Prevent absolutely-positioned elements from overlapping with text However I didn t see  until now  how to apply it to a bottom right positioned div  New structure is as follows   x000D   x000D   lt div id  outer  style  position  relative  width 450px  background-color yellow   gt           lt p gt Content of unknown length lt  p gt           lt div gt Content of unknown height  lt  div gt           lt div id  spacer  style  width  200px  height  25px  margin-right 0px   gt  lt  div gt           lt div style  position  absolute  right  0  bottom  0px  width  200px  height  20px  background-color red   gt bottom right lt  div gt       lt  div gt  x000D   x000D   x000D   This seems to solve the issue

User · Answer

Could you add z-index style to the two sections so that the one you want appears on top

[html] Stop absolutely positioned div from overlapping text

Examples related to html

Examples related to css