0

I'm trying to overlay a div with some text over another div with two images that I want left and right aligned. I've used flexboxes in the past, so I was confused why this wasn't working, but noticed once I removed position:absolute from the styles that the two images acted as I intended (with the side effect of no longer overlaying the two divs on each other). It works as desired if I set the width in pixels, but because I'm designing across screen sizes I want to avoid doing that if possible.

I saw this question that says position:absolute shouldn't conflict with flex boxes so I'm not sure why I'm running into this issue.

Here is a codepen, as you can see, when you remove the absolute positioning, the cat image moves to the far right, but when it is in place, the cat is immediately adjacent to the dog.

<div style="display:flex;justify-content:space-between;position:absolute;z-index: -1;">
    <div>FOO</div>
    <div>BAR</div>
</div>
<div>
    SOME TEXT
</div>
nbixler
  • 490
  • 1
  • 9
  • 24
  • So you are trying to place the FOOBAR over `Some Text` ? – Abin Thaha Sep 20 '21 at 13:27
  • Sorry I wasn't clearer! I want to place `SOME TEXT` over the div containing FOO and BAR – nbixler Sep 20 '21 at 13:30
  • 1
    Why not FOOBAR = flexbox and some text= absolute? And hint if you had prepared an online sandbox, you get much better responses to this posting. – zipzit Sep 20 '21 at 13:31
  • I appreciate the tip, I'll make sure to do that next time! You're correct in that it could easily be swapped - it is rather arbitrary which div is absolutely positioned and which one isn't, however the text div also involves flex boxes, so at this point I'm more curious why it seems as if the `position:absolute` prevents the flex boxes from being executed. – nbixler Sep 20 '21 at 13:36
  • Addded a codepen. – nbixler Sep 20 '21 at 13:48
  • Why don't you try using position: relative – Nishant Bhosale Sep 20 '21 at 13:57

1 Answers1

1

By providing position: absolute your div simply does not use the full width of its parent (in this case the window). You can specify width: 100% or left: 0; right: 0; to stretch it to the full width.

thabs
  • 603
  • 2
  • 13
  • Thanks for this! For anybody else having trouble, I ended up needing to set both the parent div and the grandparent div to `width:inherit` to achieve my particular desired outcome, but this answer is both accurate, and helped me see what I needed to do. – nbixler Sep 20 '21 at 15:43