Cannot get element to overlap another

Question

I have a Divi WordPress website http://linden.flywheelsites.com and I'm trying to get element ID "atlas_menu1" to overlap all other elements on the page. Somehow the element "et-page-area" or "main-content" still overlap the atlas_menu1.

Can anyone take a look at the page inspector and see if you can find a solution? I can give access if necessary.

score 0 · Answer 1 · answered Oct 07 '16 at 02:05

0

Consider looking at the z-index CSS Property

answered Oct 07 '16 at 02:05

Ryan

1,053
12
21

I have, no matter what I've done with all other elements being lower z-index and the one atlas_menu1 higher, results in the same thing. – Matthew Walker Oct 07 '16 at 02:11
@MatthewWalker What browser are you testing in, because I couldn't reproduce it with Chrome or Safari. – Ryan Oct 07 '16 at 02:14

score 0 · Answer 2 · answered Oct 07 '16 at 02:59

0

Could you look at .et_pb_text_3? It has display: none. Sorry for this answer. I can't comment yet.

answered Oct 07 '16 at 02:59

GG WordPress

63
1
16

score 0 · Answer 3 · edited Oct 07 '16 at 03:34

Remember, elements with z-index only "works" when it's on the same level.

For example:

.parent{position:absolute;width:100px;height:100px;}
.child{background:red;position:absolute;width:50px;height:50px;margin:auto;top:0;right:0;bottom:0;left:0;z-index:999999;}
.first{z-index:1;background:blue;}
.second{z-index:2;left:50px;top:50px;background:yellow;}
.third{z-index:3;left:100px;top:100px;background:green;}
.fourth{z-index:4;left:150px;top:150px;background:purple;}

<div class="parent first">
  <div class="child"></div>
</div>

<div class="parent second">
  <div class="child"></div>
</div>

<div class="parent third">
  <div class="child"></div>
</div>

<div class="parent fourth">
  <div class="child"></div>
</div>

All child class has a z-index of 999999, yet, the parent class with lower z-index, stays on top of the child's. That's because once you have nested z-index elements, a child element can't overlap a parent element.

In you case, #atlas_menu1(z-index:9999) is inside .et_pb_row_2(z-index:1) that is inside .et_pb_section_4(z-index:-1)

Try removing the .et_pb_section_4 and .et_pb_text_3 z-index, then set .et_pb_row_2 z-index to 99999.

Cannot get element to overlap another

3 Answers3