Exact example of what happens here
Let me explain, if you see the example you can notice that they are just two simple animations, two images that come up spinning around, and a text that begins to show through opacity.
In this final part my problem is, if I do not add the effect the div remains on the two animations that happens to me, but if I add the effect that works, it is behind the shapes that come round.
Does anyone know why this happens?
By the way, thank you very much !!!
That happens because the elements are in different layers, being the animated ones, they are in upper layers and that of the contentdata no.
I suggest you review about z-index and layered positioning in css3, but for now I suggest you try adding this:
.contentdata{
/*...otros estilos...*/
position: absolute;
left: 10%;
top: 0;
z-index: 5;
}
In fact the z-index that I recommend is any higher than 3.
You can use the property in css "z-index:;" . What you get with it is "order in layers" as you are interested in the contents, or what comes to be the "WEB DEPTH".
During the normal workflow, it is common that when executing the HTML, it is "layered" on top of each other when touching CSS styles, float, position "relative, absolute or fixed", margins, etc, we can get to find problems like the one you present.
Using the css Z-index:; style, you should only apply a number from 1 to 9999, which we can say are layers from back to front, or overlays of HTML tags.
The greater the number before it will be visible or "higher".
A clear example of its usefulness, is to use for the floating button as "scroll to top, social networks or navigation bar", essential parts in terms of accessibility or web usability, with z-index: 9999; in such a way that having the maximum value, ALWAYS it will be visible, accessible, clickable on top of the rest of contents facing the user.
Keep in mind that you have more than 9999 layers since you can apply negative numbers, although in reality I have never seen use less than "z-index: -1;" when you want to force something to disappear from behind in certain special cases.
A special case of application, would be in relation to SEO web positioning. Search engines lose information on the web with hidden contents "display". According to the SEO documentation, search engines do not like hidden content since it costs them more to access them or they do not directly access it. With z-index:-1; , if it will be available to the search engine but not visible to the user, remaining active but "hidden"
In your case, just put the one you want with a z-index higher than the other.
Greetings.