I’m trying to create an animation in which three different colors (three layers) of our logo shoot in from the right and left sides of the page once the website loads, moving behind the main black logo once the animation is over.
I’m wondering how to layer these elements, as duplicating them just makes the logos go side by side, or one on top of the other. Right now the logo element is an “image” - I’m not sure if I need to delete this and re-create it as a new element in order to layer the four. (div perhaps?)
By using position:absolute on each layer, and by giving the reference parent position:relative, you can superpose your elements and order them using z-index.
I’ve just set my two logos to an absolute position, and ordered them via the z-index - but once I checked the logos out on the other screens other than a desktop, they were all fudged up! Why do you think this is? Sigh.