5

I have a link in a table cell and when the link is clicked I show a hidden div.

Currently I use position: absolute and z-index:10. It works fine, but I would like to move it a bit to the top and left. When I add top: -10px and left: -10px, the div moves to the position of the window.

How do I make it 10px off the table cell?

santa
  • 12,234
  • 49
  • 155
  • 255

3 Answers3

12

You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp

relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

absolute The element is positioned relative to its first positioned (not static) ancestor element

You might also be interested in fixed.

fixed The element is positioned relative to the browser window

Here is an Example: http://pastehtml.com/view/av391nzsv.html

m4tt1mus
  • 1,642
  • 14
  • 24
  • OK... So how do I reference the where the div is "hiding"? In jQuery I can probably do something like $(this).parent(); but I'm still not very clear... Could you give an example, please? W3schools' example references the top/left of the page. – santa May 26 '11 at 22:59
  • if you want it to overlay the table you need to set position: relative on the table. then on the element (the td it sounds like) you want to actually move around and position, set position: absolute and use top/bottom/left/right to move it into position. i would make an example for you but i'm currently at work. I can make one when i get home in a couple hours if you still need it. – m4tt1mus May 26 '11 at 23:04
  • if you linked the site it would probably be easier to explain as well. – m4tt1mus May 26 '11 at 23:05
  • It is not on a site yet. I'm writing code on a local machine now. And yes, I would really appreciate an example. – santa May 27 '11 at 01:06
  • http://pastehtml.com/view/av391nzsv.html sorry it took so long. cats decided to eat my speakers while i was at work. – m4tt1mus May 27 '11 at 05:37
0
position: relative;

instead of

position: absolute;

Relative says to measure top and left from the parent element, absolute says to measure from the top left corner of the page.

Alan Geleynse
  • 24,821
  • 5
  • 46
  • 55
  • That's what I started with but for some reason it pushes my table cell when it becomes visible... – santa May 26 '11 at 22:43
0

use margin-top:-10px; margin-left:-10px;

Alan Geleynse
  • 24,821
  • 5
  • 46
  • 55
buhbang
  • 715
  • 1
  • 7
  • 18