table enclosed by div

Question

I have a table inside a div 1.

Then after that div 1 added another div 2 with position:relative; top:-250; so that div 2 layer will be right on top of the table. But now below the table there is a big space before anything on the page can resume displaying (I guess the second div 2 would have normally been without the -250 position change?) How do I get rid of the space and clear it? I tried this...

<div style="clear:both;"></div>

...and it didn't do anything

The page is here...

http://www.gootar.com/drums/metronome.html

I really just need a way to have a layer I can write text in (like the number 2) right on top of the table. Is there an easy way to do this?

There is a big space now underneath before the play buttons for no reason?

Update:

I did this following Fraxtil's advice:

Using position: absolute; margin-top: -250px; seems to be the solution you're looking for.

also with left:375;

..and that works,

but won't that make the div 2 always exactly there? What if the table changes position on the page? Can I do this so it can be directly related to the table position somehow?

Answer 1

Using position: absolute; margin-top: -250px; seems to be the solution you're looking for.

Answer 2

In response to your update, the div will alwyays move in relation to it's immediate container, something that many folks aren't aware of because it's not really that obvious.

How Absolute Items are Positioned

Absolute, as a positioning mode, specifies that the positioned item is to be removed from the normal document flow, positioned absolutely relative to its container's position in the document flow, and any items below it are moved up.

The coordinates you are specifying are an offset, not an absolute position. That is, you're saying, "Move left by 20 pixels and up by 15". You're not saying "Go to pixel position 20 from the left and 15 from the left." If you were saying this second condition, then the div would never move from position 20x15, and you'd have a problem. (Note that you can also use width and height here, as well.)

Your "absolutely" positioned element is actually relatively positioned to its container. The browser is responsible for ensuring that they remain within the specified distance of one another, using the style information specified in the stylesheet.

How the Container is Identified

Now, the question then becomes, An offset from what? And that's the trick. Typically, this is the element's immediate container. But it's not that simple. Any time you apply positioning to an element, that element becomes a container. Confused yet? :)

The containing block for an absolutely positioned element is either:

• The closest positioned ancestor (the nearest element outside the absolutely positioned element that has a position of fixed, absolute, or relative), —OR—
• The initial containing element (the browser window).

If your element isn't placed within another positioned element, its container is likely the window. That will cause it to behave like an element with a fixed position, and it won't move. (Well, it might: but relative to the left and top of the window, which is likely not what you want.)

---

This tutorial (not mine) covers CSS positioning pretty well. It's long, and has an annoying wizardy interface, but it gets the job done.

Answer 3

Thanks @mike-hofer that was a fantastic answer... it really helped