Blank areas where webpart originally lived after position:relative web part

Question

I'm creating a page and using CSS in a content editor to customize. I have a title webpart, list web part, and a show all / hide webpart that I'm using JavaScript to reveal a 2nd list and hide the first list mentioned.

I have the list web part with a graphic behind it and added padding to the top and bottom. I then position: relative the title and show/hide to be moved on top of the graphic.

My issue is I now have gaps where the web parts were prior to me position:relative. I've done some research and some say to add a margin-bottom: or margin-top: to compensate but nothing happens when I add that to my code.

Any help would be great.

Answer 1

I actually finally figured it out.

I couldn't use display:none because I still needed the webpart to display. The key to get the negative margin to work was float left. I never tried this because I wanted my items centered. Adding a width 100%; aligned it back up and now I have no blank areas from where the webparts were!

My code giving me blank areas:

position: relative;
top: -150px;

How to fix it:

position: relative;
float: left
width: 100%;
top: -150px;
margin-top: -150px;