Position element with CSS (z-index does not work)

Question

Position element with CSS (z-index does not work)

Navigation

#1 by (2 votes)

0

excellent day everyone, I hope you can help me I want to position the cloud below the element that looks darker, but unfortunately I have not been able to achieve it, it is worth noting that I use z-index both in the cloud and in the container but unfortunately nothing happened, someone can help me solve this problem, I would appreciate it very much

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;
}

css

asked by Rodrigo Arenas 11.01.2018 в 00:09

source

1 answer

How to Install Pascal on Ubuntu 17.10 perform an if of transform: translate3d

score 2 · Answer 1

In order for Z-index to work properly you must comply with certain conditions , it is mainly used in the following way:

<main class="padre">
  <div class="hermano uno">
    <img class="hijo" src=".png"/>
  </div>
  <div class="hermano dos">
  </div>
</main>

Mainly for the z-index layers to work, they must be at the same level of kinship, for example with the previous code the z-index will work with the two "brothers" , but it will not work between the child and the brother 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:

Elements placed in layers, must be at the same hierarchy level in the html layout.
They must have declared position different from the default that is static .
Items nested in a lower or upper layer will inherit the layer declared in their container, but will never overlap the level declared to the container ancestor or the "sibling" elements to the parent .

The most typical error is to believe that this will work in css, like this:

.hermano, .hijo {position: relative;}

.hijo{z-index: 1; }

.hermano.dos {z-index: 9999}

If the image "son" is greater than the height of "brother one" it will overlap "brother two", so when wanting to correct this one tries to use a z-index in "brother two" very high to try without correcting this, but as I mentioned, not being at the same level, the son and brother two, this will never work, in this case, we must declare the z-index in the two brothers and increase the value in which you will overcome , like this:

.hermano, .hijo {position: relative;}

.hermano.uno {z-index: 1}

.hijo{}

.hermano.dos {z-index: 2}

I hope it has been clear, or that indeed is the error that is presented to you, the truth is that as many have commented on the code put in the question, it does not reproduce the error and it is very difficult to know how to help you in a better way. Successes!