在javascript元素上放置html元素

Question

this is the website I'm working on: http://labbrini.netsons.org and on its left side I have a div (#puntate) that should be on top of the javascript of the big lips logo (#logo) that shows up over everything. Of course I need the links of #puntate being clickable even when logo shows over it. z-index doesn't works for this. Can somebody help me with this positioning?

Answer 1

While inspecting your code in my browser, I saw that you were using px for z-index .

Dont give any units for z-index

In your CSS, replace,

z-index: 900px;

with

z-index: 900;

As, stated in the docs

The z-index property specifies the z-order of an element and its descendants.

And, order doesnt have a unit. Thus no need for any units. Any element with a higher z-index will be on top of other elements.

Answer 2

Thank you all. The value to the z-index was my stupid mistake. But I needed to tinker a little bit more in order to get what I wanted. I created another div #left2

<div id="left"></div>
<div id="left2"><div id="puntate"><ahref="http://labbrini.netsons.org/Labbrinip1"> 
Labbrini p.1 - Lorem ipsum dolor sit amet</a><br/> 
</div></div>

so that my div in question (#puntate) belongs to the new one and I set the background-color to transparent in order to see below the old one with the color transition:

#left2 {
background-color : transparent;
position:fixed;
display: table;
z-index:1000;
width:50%;
height:100%;
position:fixed;
bottom:0;
left:0;
}

and of course the z-index of #puntate is set to an higher value than #logo

I'm sorry for not having posted previously the code.