How to make child z-index more than parent or any other way to achieve the effect?

Question

I'm trying to develop the following effect. Where parents are two sections like this and child is an image. How to achieve this without using absolute?

<section>
  <img />
</section
<section>
  ..more content
</section>

But I got to know that child's z-index cannot be more than parent than whats the way round this?

So what have you tried so far to achieve this ? Please post HTML and CSS in a code snippet that reproduces your current situation — Mihai T, Sep 26 '19 at 07:28

score 0 · Answer 1 · answered Sep 26 '19 at 07:36

0

position: relative and proper values of bottom and left on red parent will do the trick. Also you can use transform: translate(xValue, yValue) to achieve the same effect. Just remember to adjust z-index correctly.

answered Sep 26 '19 at 07:36

Slawomir Wozniak

489
6
14

score 0 · Answer 2 · answered Sep 26 '19 at 07:38

0

try keeping img tag out.

   </section>
   <img>
   <section class="section-2">
   </section>```

you can check this if it can work for you : 
try this fiddle


  https://jsfiddle.net/anviksuteiriy/d781L6ry/11/

answered Sep 26 '19 at 07:38

Anant Vikram Singh

538
1
4
14

score -1 · Answer 3 · answered Sep 26 '19 at 07:16

-1

You can achieve that effect by using the default behaviour of nesting.

<div class="parent1">
  <div class="parent2">
    <div class="child"></div>
  </div>
</div>

This layout will align the items as you requested, there is no need using z-index.

answered Sep 26 '19 at 07:16

felixmosh

32,615
9
69
88

Section 2 can't be taken inside section 1 – Muhammad Osama Sep 26 '19 at 07:31

How to make child z-index more than parent or any other way to achieve the effect?

3 Answers3