How can I make an <img> position: relative nested in a position: absolute <div> clikable with?_问答_开发者

How can I make an <img> position: relative nested in a position: absolute <div> clikable with?

开发者 https://www.devze.com 2023-04-07 05:17 出处：网络

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

How can I make an <img> position: relative nested in a position: absolute <div> clikable with?

精彩评论

关注公众号

热门标签

图文推荐

How can I make an <img> position: relative nested in a position: absolute <div> clikable with?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：