Make DIV position relative to link...

Is there a way to make a DIV's position relative to a link AND make it a seperate layer?

I'm using a single configuration for a number of pop-up boxes on a webpage... they all look the same... the content just changes. So anyway... I'm using very simple javascript to show and hide the DIVs, but I'm stuck with an either/or situation.

If I make the DIV position relative, I can place the DIV in a position relative to the link they're clicking on, BUT it won't be a seperate layer, so the DIV (even though it's not visible) pushes other content down the page.

If I make the DIV position absolute, then the content on the page isn't affected (since the DIVs are seperate layers) but then I have to pick one position for all the pop-ups to show up in... I want each pop-up's position to be relative to the link they're clicking on.


Obviously I could make different CSS styles to go with each DIV, but that would involve lots of redundant script in the STYLE tag, and I'd also have to figure out the perfect absolute position for each one....


....is there a better way?


WATYF
LVL 11
WATYFAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Hi WATYF,

You're correct, position:absolute is the way to go - we just need to set it absolutely to the link instead of to the body.

We do this by assigning position:relative to the link, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

body
{
      margin:50px;
      padding:0;
      font:11px verdana;
}

.link
{
      position:relative;
      height:30px;
      width:200px;
      background-color:#eeeeee;
      margin:20px 0;
}

.popup
{
      position:absolute;
      width:120px;
      height:20px;
      left:80px;
      top:10px;
      background-color:#333333;
      color:#ffffff;
      border:2px solid #666666;
}

</style>
</head>
<body>

<div class="link">
      <a href="#">Link 1</a>
      <div class="popup">
            Popup Content 1
      </div>
</div>

<div class="link">
      <a href="#">Link 2</a>
      <div class="popup">
            Popup Content 2
      </div>
</div>

<div class="link">
      <a href="#">Link 3</a>
      <div class="popup">
            Popup Content 3
      </div>
</div>

</body>
</html>

Thanks,
Sean
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WATYFAuthor Commented:
Thanks man... that did the trick.



WATYF
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.