Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Aligning SVG's in design

I'm in a bit of a pickle with a design I'm creating. It's just for my own site and in theory I assumed it would work, but after much trying in various ways I thought it best to ask the experts ;)

Best to show the design first here. I'm having problems aligning the mountains and buildings. I thought it would work putting the four SVG planes (2 mountain and 2 city) in a container, set that container to position: relative; and the SVG's inside to position: absolute; along with a staggered margin or padding below each one to raise it up the further back it was.

You can view the Codepen

I'm ideally going to add in Skrollr after to have a parallax depth on scroll afterwards, but I'm just having issues getting them to look right to begin with.

Seriously pulling my hair out now so any guidance would be really appreciated.

Many thanks.

  • Sul

1 Answer

Robert Catto-Smith
Robert Catto-Smith
3,157 Points

Use top: -10px; to move your layer groups instead.

Margins won't work because it has absolute positioning.

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Of course, feel like a fool for not figuring that one out :/