Make DIV position relative to link...

Posted on 2004-11-12
Last Modified: 2008-03-03
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.... there a better way?

Question by:WATYF
    LVL 31

    Accepted Solution

    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" "">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">

          font:11px verdana;

          margin:20px 0;

          border:2px solid #666666;


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

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

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


    LVL 11

    Author Comment

    Thanks man... that did the trick.


    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now