How can I produce a "floating" object below an inline element in HTML?

Question

Hi!

I have a slew of normal inline < a > links that I want to open up small "floating" objects on click. These objects would be simple html divs (with some CSS) that would load on top of the page and below the link. I don't want to use relative positioning which would push the page around and I can't think of a way to use absolute positioning to get the divs underneath the inline links. I currently envision toggling the display value of the objects from none to whatever and back. I'm open to ideas.

Thanks!

Mike

Answer 1

you can use "fixed" position:

<div style="position: fixed; left:100px; top:100px; background-color: white; height: 200px; width: 200px;"> ... </div>

"fixed position" --> Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

Answer 2

You may use absolute positioning with the parent set to relative. e.g.

<div id="container">
    <a href=...>hover me for floating!</a>
    <div class="floating">
     ...
    </div>
</div>

In CSS,

#container { position: relative; ... }
.floating { position: absolute; top: 20px; left: 20px; }

In the above example, the .floating div is absolute positioned, which means it is taken away from the normal flow (ie, no placeholding it). But it also relative reference to it's parent, which is the div#container in this case, so that, if you set the top and left position, it is actually calculated from the top-left corner of div#container rather than to the document body.

Answer 3

I'd suggest:

<style="text/css">

a {
display: inline;
position: relative;
}

a span.pop_up_floaty_thing {
position: absolute;
top: 1em;
left: 0;
display: block;
width: 10em; /* or whatever  */
}

</style>

<a href="..." title="...">Link text<span class="pop_up_floaty_thing">The pop up, floaty thing text</span></a>