Position:absolute creating messing up grid flow

Question

I'm trying to make a grid with css from which, when clicked, a div can "break out" of using position:absolute, so that it can be moved around above the grid without messing with aforementioned grid. Here's the jsFiddle. As you can see, when clicked the position is set to absolute, but henceforth destroys the grid structure around it instead of simply floating above it. I've tryed using z-index, but it did not work. What am I doing wrong?

Thanks in advance!

Answer 1

Add

vertical-align: middle;

to .icon_wrapper

Demo