Menu icon Foundation
Foundation grid won't let me have larger elements in front or behind

I'm wondering if there is a way to use the Foundation grid, but then also add another element that is larger than the columns/rows in front or behind other elements. The large object is sort of part of the background, but it's an animated svg, so I can't just set it as a background.

There are two examples in the CodePen. The first(top) one is the one with the Foundation grid that I am trying to add this large, white, mostly transparent, svg circle to. The second(bottom) example is without the Foundation grid but displays the background circle (#bg-circle) as it should be.

I thought there might be some way to do it with a z-index, but I had no luck with it.

See the CodePen here

htmlcssFoundationgridz-indexstuckissue

I'm wondering if there is a way to use the Foundation grid, but then also add another element that is larger than the columns/rows in front or behind other elements. The large object is sort of part of the background, but it's an animated svg, so I can't just set it as a background.

There are two examples in the CodePen. The first(top) one is the one with the Foundation grid that I am trying to add this large, white, mostly transparent, svg circle to. The second(bottom) example is without the Foundation grid but displays the background circle (#bg-circle) as it should be.

I thought there might be some way to do it with a z-index, but I had no luck with it.

See the CodePen here

Rafi Benkual about 3 years ago

You can use z-index to move an element up. Example: http://codepen.io/rafibomb/pen/dOmmoB