close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

losing link in the stack

Thread began 1/16/2014 9:18 am by Jamie | Last modified 1/16/2014 3:08 pm by Jason Byrnes | 319 views | 5 replies |

Jamie

losing link in the stack

Hey Jason

Just wondering why the link would not work (or how would I get the link to work) in this stack?

<div style="float:left;">
<div style="position:absolute; z-index: 2;"><img src="images/sponsors-hexagons/mask.png" width="208" height="243"></div>
<div style="position:relative; top: 0; z-index: 1;"><a href="#"><img src="images/sponsors-hexagons/platinum.jpg" width="208" height="243"></a></div>
</div>



cheers

Sign in to reply to this post

Jason ByrnesWebAssist

basic z-index.

you have 1 div that uses position:absolute;

and another that uses position:relative;


when css calculates the stacking order, it first looks at position.

absolute is stacked on top of relative, within the absolute stack, it looks at the z-index and within the relative stack it looks at z-index.

you could set the z-index in the relative stack to 1000, but it will still be below a div in the absolute stack with a z-index of 1.

add the link to a absolute z-index div or set the z-index for the absolute div to -1

Sign in to reply to this post

Jamie

the problem with that is that the background image then becomes the front image and thats what I am trying to avoid... i was just wondering if its possible to have the link that is associated with the background image to actually be clickable *through* the foreground image. I guess not.

I think an image map would achieve the same effect I am trying to do.

Thanks for taking a look

Jamie

Sign in to reply to this post

Jason ByrnesWebAssist

background images should be applied through CSS backround-image attribute, not by trying to manipulate z-index.

Sign in to reply to this post

Jamie

Its going to be a slideshow in the background otherwise I would have used the background-image attribute. And each image in the slideshow needs to be a link. the foreground image is a 'framing' image

Sign in to reply to this post

Jason ByrnesWebAssist

trying to manipulate the stack mixing position types wont work, you'll need to use another strategy.

look at some of the available slideshow scripts, surely one of the many out there should do what you are trying to.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...