How do I float icon between rows?


I am attempting to float an icon between two rows in Ionic. In this case an Ionic Link Icon. I’ve done this in the past with a combination of z-index and position:absolute.

My current code in the below codepen shows the icon above one row and below the following even though I have set the z-index to 1.

Any thoughts?


I think I got it by tweaking the container margin top and bottom and allowing overflow:visible.