How to hide a position under an element?

[pinkod02]

I need to place a position element on a block element, how to hide the position under the element, z-index did not help me.

[snadyleiby]

Example here…

Full Page View
https://codepen.io/Snady_Leiby/full/zYeJePX

Editor View
https://codepen.io/Snady_Leiby/pen/zYeJePX

[pinkod02]

It’s difficult to understand what and how it works)

[PaulOB]

@pinkod02

It’s difficult to understand what and how it works)

The image is placed absolutely and when shown will sit on top of the text because stacking by default follows in the html order for positioned elements. You can change this by using z-index on positioned elements but not required for that example.

The element that holds the image is set as position:relative which creates a stacking context for the absolutely placed image.

The checkbox hack is used to hide and show the image as required. You should read the article above for a full understanding of how it works.

Here’s a simpler example with images placed on top and under each other to start with so you can see how they interact. The images could be any elements and I only offset them to that you can see both.

Ignore the third example as that was from an old demo and not really relevant to your question.

[pinkod02]

I have an image with the class trof__img-1, it should hide under the image trof__img, from your example, nothing worked for me in my code

[PaulOB]

You have placed img-1 on top of img-2 because you gave img-1 a higher z-index…

.trof__img-2 {
  position: absolute;
  top: 317px;
  left: 200px;
}
.trof__img-1 {
  position: absolute;
  left: 278px;
  top: 399px;
  z-index: 2; /* this puts img-1 on top */
}

The higher the z-index the closer to your eye the element will be in that stacking context.

If you want img2 on top then just remove the z-index from img-1.

If you want it hidden by the other element then of course they would need to be in the same place but it’s unclear what you are trying to do.

Note that your absolute positioning will result in those images overlapping anything in that context (as seen in my screenshot) as you have not preserved space or accounted for that fact that absolute elements are removed from the flow.

[pinkod02]

The thing is that your example works, but as soon as I add a position everything breaks and I have to redo everything)))

[PaulOB]

@pinkod02

but as soon as I add a position everything breaks and I have to redo everything)))

Without knowing what your design should look like its hard to help in detail. I'm guessing you want the image on the left under the h3 title.

e.g.

Maybe like this:

If that’s correct then you need to create a 2 column area in that section to hold the h3 and the images in a column. You would then only position one image and place it on top of the other image.

I placed those images like this:

<section class="trof">
  <div class="container">
    <div class="trof__inner">

      <div class="trof__inner-p">
        <div class="imgwrap">
          <h3 class="tack__title">СУПЕР ТРОФЕО ЭВО</h3>
          <div class="wrap">
            <img src="https://picsum.photos/id/1015/200/200" alt="img1" class="trof__img-1">
            <img src="https://picsum.photos/id/1016/200/200"" alt=" img2" class="trof__img-2">
          </div>

        </div>

        <div class="trof__inner-p-2">
          <p class="trof__p">Новый Huracán Super Trofeo EVO достигает еще больших высот, чем его
            прославленный предшественник, благодаря полностью переработанной аэродинамике. Huracán Super
            Trofeo EVO является идеальной стартовой площадкой для всех водителей, которые хотят начать
            карьеру в гонках класса GT.</p>
          <p class="trof__p">
            Huracán EVO — это эволюция самого успешного Lamborghini с двигателем V10. В результате
            тонкой настройки и усовершенствования существующих функций в сочетании с новыми
            конструктивными решениями, повышающими производительность, автомобиль выделяется своей
            способностью предугадывать и удовлетворять поведение, ожидания и желания водителя.
          </p>
        </div>

      </div>
      <img class="trof__img" src="img/trof__car-2.png" alt="">
      <ul class="ul">
        <li class="trof__li">ПЕРЕМЕЩЕНИЕ<br>
          5204 см³</li>
        <li class="trof__li">КРУТЯЩИЙ МОМЕНТ<br>
          570 Нм при 6500 об/мин</li>
        <li class="trof__li">МОЩНОСТЬ (л.с.) / МОЩНОСТЬ (КВТ)<br>
          620 л.с. при 8250 об/мин</li>
        <li class="trof__li">МАКС. СКОРОСТЬ<br>
          325 км /ч</li>
        <li class="trof__li">0-100 КМ/Ч<br>
          2,9 с</li>
      </ul>

    </div>
  </div>
</section>

Then you can simply place one image on top.

.trof__img-2 {
/* nothing needed here */
}
.trof__img-1 {
  position: absolute;
  border:1px solid red;
  left:25px;
  top:25px;
}
.wrap{
  position:relative;
}

There would still be a lot of tidying up to do as you seem to have elements doing nothing and ‘magic numbers’ for padding and margins.