position absolute can't put behind a normal element for a click slide in menu

Question

.wrap {
  display: flex;
  flex-flow: column;
  background: gray;
  position: relative;
  overflow: auto;
}

.menu {
}

.replay {
  height: 100px;
}

.slide-in {
  transform: translate(0, -40%);
  position: absolute;
  background: red;
}

.head {
  background: yellow;
}

<div class='wrap'>
  <div class='replay'>Extra Stuff</div>
  <div class='menu'>
  <div class="slide-in">
    World
  </div>
  <div class="head">
    Normal
  </div>
  </div>

</div>

I am trying to create a menu, where you click normal, World in red, slides into view, from behind the Normal div.

But I can't put the red world behind the normal div. I've tried reordering elements, or z index but didn't work.

Is [this](https://jsbin.com/mehopufaku/1/edit?html,css,output) what you want? — Yousaf, Jul 07 '22 at 07:28
I didn't put the click functionality, just put red behind yellow. — eguneys, Jul 07 '22 at 07:30
Yes that worked so `position: relative;` why is that needed here, can you put an explanation as an answer? @Yousaf — eguneys, Jul 07 '22 at 07:38
@eguneys You have to make the parent container `position: relative;` as you don't want to mess the rest of your layout, since you're making your child element `position: absolute;`. When you use `position: absolute` on an element you're basically removing it from the normal document flow. — Parit Sawjani, Jul 07 '22 at 07:44

score 0 · Answer 1 · answered Jul 07 '22 at 07:48

0

Not clear about your issue. As I understood, you want to show Normal on World text. To do that, just add position relative to the head class. Both are siblings.

answered Jul 07 '22 at 07:48

Akib

304
2
9

score 0 · Answer 2 · answered Jul 07 '22 at 08:05

I dont really understand your question but this solve your issue?

 const normal = document.getElementsByClassName("head")[0];
    const world = document.getElementsByClassName("slide-in")[0];

    normal.addEventListener("click", () => {
        world.classList.toggle("active");
    })

.wrap {
        display: flex;
        flex-flow: column;
        background: gray;
        position: relative;
        overflow: auto;
    }



    .replay {
        height: 100px;

    }

    .slide-in {
        transform: translate(0, -90%);
        position: absolute;
        background: red;
        z-index: -1;
        transition: all ease-in 0.25s;
    }

    .slide-in.active {
        transform: translate(0, 0%);
        z-index: 0;
    }

    .head {
        background: yellow;
    }

<div class='wrap'>
  <div class='replay'>Extra Stuff</div>
  <div class='menu'>
  <div class="slide-in">
    World
  </div>
  <div class="head">
    Normal
  </div>
  </div>

</div>

score 0 · Answer 3 · answered Jul 07 '22 at 08:08

0

Check out the order property and see if that helps

Order Property on w3schools: https://www.w3schools.com/cssref/css3_pr_order.asp

answered Jul 07 '22 at 08:08

Cru Niscavits

1

position absolute can't put behind a normal element for a click slide in menu

3 Answers3