1

I am trying to have 2 divs totally overlapping: one div for a menu controller, one div for a menu. The menu controller will catch all the mouse events, make the menu div disappear, etc. I have settled most of it already, but I cannot manage to have the controller div on top of the menu div. To check the positioning, I change the background color of the controller in order to see if the menu is hidden.

My code is at the following location: http://codepen.io/3MO/pen/mJKeKg. The main idea is the following:

   #menu {
        z-index: 0;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 150px;
        background: linear-gradient(90deg, rgb(60, 60, 60) 40%, white 49%, white 51%, rgb(60, 60, 60) 60%);
        background-repeat: no-repeat;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 16px;
        cursor: auto;
    }
    #menuController {
        z-index: 10;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 150px;
        background-color: red;
    }

I tried position:relative and position: absolute for both divs, no luck so far. Can you tell me what I do wrong?

Thanks!

Joel
  • 669
  • 7
  • 25
  • z-index isn't just about slapping a higher value. Many things come into play like positioning and foremost the parent-child relationship. You can't position a parent element in front of a child element. –  Jul 13 '15 at 14:52
  • ok, but the 2 divs are not parent related... – Joel Jul 13 '15 at 17:14
  • http://codepen.io/anon/pen/zGaBPd Keep the css file separate. Easier to debug :) – SearchForKnowledge Jul 13 '15 at 19:36

2 Answers2

1

You should add position: relative to their parent ( <body> ) element

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
0

I've managed to create a workaround this issue using javascript since you're already using this a lot. Function you need is below. I'm hiding menuController just for a moment, check what is beneath it under click coordinates and then showing it again.

function registerControllerClick() {
    $(menuController).click(function(event) {
      $(menuController).hide();
      window.location.href = document.elementFromPoint(event.clientX, event.clientY).href;
      $(menuController).show();
     });
}

Add it to your init code:

function init() {
        registerControllerOver();
        registerControllerOut();
        registerControllerClick();
    }

Working example

If you don't want to go to location specified by href, but trigger click event instead use jQuery trigger('click') - take a look here

Community
  • 1
  • 1
Keammoort
  • 3,075
  • 15
  • 20
  • Thanks, it worked! I still don't understand, why did this fix the problem, what was wrong with putting different values? Plus, I don't see the mouse cursor changing on the links, it seems that the div behind receives no event at all. Is there a way to correct that? – Joel Jul 13 '15 at 18:37
  • Hum, actually I was mistaken, it does not work in the sense that the texts are still visible. I tried to inverse the two divs in the html, and THEN it works (I don't know why), but the links are no longer clickable. – Joel Jul 13 '15 at 18:50
  • Checkout this question - it's about creating new stacking context and using z-index - http://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context What exactly are you trying to achieve? You wanted #menuController to be in front, but yet you want #menu to be clickable? Could you tell precisely what do you need? – Keammoort Jul 13 '15 at 18:51
  • My goal is to have a light effect like in this one: http://codepen.io/3MO/pen/VLdjmx – Joel Jul 13 '15 at 19:16
  • My problem is, the links are disrupting the effect, it seems it provokes a mouseout/mouseover on the div on top of them. I would want the div on top to receive the mouseover, mouseout, mousemove, but the mouse click would be received by the links. It was possible in Flash, to select if an element receives a mouse click or this event should be sent "below". – Joel Jul 13 '15 at 19:18
  • My final goal is to redo the site http://www.obscures.net in html/css/javascript, you can see the effect on the menu. – Joel Jul 13 '15 at 19:19
  • When I switched the div and forget everything about z-index, the light effect works well and this shows what I want to get at the end: http://codepen.io/3MO/pen/Wvyxar But I loose the ability to click on the links. – Joel Jul 13 '15 at 20:01
  • @Joel Checkout my updated answer, it's more like a workaround but it works – Keammoort Jul 13 '15 at 21:28
  • Thanks, this would be on top of my latest proposition? You mention I use javascript a lot, is there other ways to move stuff according to the mouse pointer position? The problem I have with my latest codepen, the mouse cursor does not change over the links. So I was more thinking about doing things in reverse: detecting when I am inside the menu or not by setting a controller OUTSIDE, and manage the mouseover the menu when the mouse is out of the controller, and a mouseout on the menu when the mouse is on the controller. It is a bit weird though... and seems overkill... – Joel Jul 14 '15 at 06:35
  • There is another problem, my menu items will trigger javascript actions and won't go to actual link. It means I need to know which element is clicked and wire appropriate action: basically reimplement the mouseclick on this element by code. That is tedious :( – Joel Jul 14 '15 at 06:44
  • 1
    Now that you have the element from menu you could trigger 'click' event - see http://stackoverflow.com/questions/5811122/how-to-trigger-a-click-on-a-link-using-jquery – Keammoort Jul 14 '15 at 07:05
  • Thanks a lot, it works. I owe you one, BIG TIME. The mouse cursor is not ideal but I will consider this bug with status "can live with it until I die". Thanks again! – Joel Jul 14 '15 at 14:41
  • If it helped you consider marking my answer as correct – Keammoort Jul 14 '15 at 15:43