0

Is there an easy way (without manually setting any heights) to make sure a parent element always wraps/contains a child, even if the child has been relatively positioned? 

<div style="background-color: red;">
  <div style="background-color: pink; position: relative; top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

In the example above the "one." div flows out of its parent and overlaps/hides the "two." div, but my desired effect is to have the parent div contain the whole of the child and the "two." element flowing underneath.

Zak123
  • 363
  • 2
  • 9
  • 1
    refer this: duplicate: – kish May 28 '18 at 10:12
  • that's about floats, this isn't, not a duplicate. This was a silly question though, mehulmpt answered it perfectly, been out of web stuff for far too long. – Zak123 May 28 '18 at 10:20

1 Answers1

3

top is used to position element so that it has no effect on the surrounding elements. Use margin-top if you want to affect the parent as well, otherwise top doesn't affect the other elements.

<div style="background-color: red; display: flex;">
  <div style="background-color: pink; position: relative; margin-top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>
mehulmpt
  • 15,861
  • 12
  • 48
  • 88