Q:

Making parent element expand to contain a relatively positioned child? 

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. 

A:

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>

