How do I make a fixed element push other elements to the side when they overlap?

I don't want this:
[![enter image description here](https://i.stack.imgur.com/CeBhK.png)](https://i.stack.imgur.com/CeBhK.png)

Or this:
[![enter image description here](https://i.stack.imgur.com/o19Ob.png)](https://i.stack.imgur.com/o19Ob.png)

I want this:
[![enter image description here](https://i.stack.imgur.com/J9710.png)](https://i.stack.imgur.com/J9710.png)

I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.

Edit: I tried positioning a `div` to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?