excellent day to all, I hope you can help me I want to position the cloud under the element that looks darker, but unfortunately I have not been able to do it, it should be noted that I use z-index both in the cloud and in the container but unfortunately nothing happened, Can someone help me to solve this problem, I would really appreciate it.
My container is like this
<div class="banner-section">
<img src="src/img/nubes-efecto-paralax.svg" alt="" class="nube-img">
and the CSS properties of the image are these:
.nube-img{
width: 100%;
position: absolute;
margin-top: 170px;
}
For Z-index to work correctly you must meet some conditions , it is mainly used in the following way:
Mainly for the z-index layers to work, they must be at the same level of parentage, for example with the code above the z-index will work with both "siblings" , but will not work between child and sibling two . The other thing that needs to be added is position: relative , fixed or absolute as the case may be. Then the conditions, formally written, would be:
The most typical mistake is to believe that this will work in css, like this:
If the "child" image is greater than the height of "brother one" it will overlap "brother two", so when you want to correct this, you try to use a z-index on the very tall "brother two" to try without results of correcting this, but as I mentioned to you, since the son and the brother are not at the same level, this will never work, in this case, you have to declare the z-index in the two brothers and increase the value in which will overlap , like this:
I hope that it is clear, or that it is indeed the error that you are presented with, the truth is that as many have commented on your code in the question, it does not reproduce the error and it is very difficult to know how to help you in the best way. successes!