How can I make an <img> position: relative nested in a position: absolute <div> clikable with?
I am translating a flash carousel to JavaScript and I am having problems with the position. This is the CSS of the div that cont开发者_高级运维ains the images.
#tiovivo{
height:382px;
width:793px;
background-color:#F5F5F5;
z-index:-1000;
overflow:hidden;
position:relative; }
If the position is not relative the JavaScript code has to be longer and the images go out of the border
The images are in the div like this:
<div id="tiovivo">
<img id="tio4" style="cursor:pointer; position:absolute;" onClick="location.href='tio4.php'" height="150px" src="tio4.jpg">
<img id="tio5" style="cursor:pointer; position:absolute;" onClick="location.href='tio5.php'" height="150px" src="tio5.jpg">
</div>
The problem is that when #tiovivo is position:relativeI am unable to click the images, the events "onclick" don't work and the cursorpointer is not shown.
If #tiovivo is in position:static the "onclick" and the cursor:pointer do work correctly.
I need images "position: absolute" so I can put them easily in the JavaScript code.
1.) Remove z-index:-1000 to make the all elements in the div clickable.
2.) If absolute position for the images, you have to add a vertical and a horizontal position (left or right, top or bottom) to them.
Also see my jsfiddle.
Your problem is the z-index: -1000 setting.
Compare this (with the z-index on #tiovivo):
http://jsfiddle.net/ambiguous/5HZdp/
and this (without the z-index on #tiovivo):
http://jsfiddle.net/ambiguous/HLp3Z/
Your negative z-index is pushing #tiovivo and its children under <body> so the images never receive click events. You don't need the z-index to get your absolutely positioned images on top, they'll be on top by default.
There are several problems with your case
- there is no javascript involved, at least it is has nothing to do with positioning here
- you are using position absolute with no other position attributes eg.left,right etc.
- remove z-index CSS and it will work. You are placing whole DIV UNDER everything else even if it is transparent
Thank you all, it was the z-index: -1000 I used this index because I was programing a "3D" effect and I want to avoid that the bottom of #tiovivo cover the images.
This is the function I use to update the carrousel
pos0+=(offx-tempX)/5000;if(pos0> 6.28318531){pos0-=6.28318531}
image0.style.left=offx+310*Math.cos(pos0)+"px";
ytilt=Math.sin(pos0);
image0.style.top=offy+310*ytilt*((offy+tempY)/1000)+"px";
image0.style.zIndex=Math.round(ytilt*10);
pos1+=(offx-tempX)/5000;if(pos1> 6.28318531){pos1-=6.28318531}
image1.style.left=offx+310*Math.cos(pos1)+"px";
ytilt=Math.sin(pos1);
image1.style.top=offy+310*ytilt((offy+tempY)/1000)+"px";
image1.style.zIndex=Math.round(ytilt*10);
I fixed the problem adding an offset to zIndex of the images because sin() function goes from -1 to 1.
image0.style.zIndex=100+Math.round(ytilt*10);
And removing the z-index: -1000 from #tiovivo
加载中,请稍侯......
精彩评论