-1

For a project I'm working on, I need to make a custom button that can be dragged and dropped and then have it's position saved so that a separate window can be opened with the button in the same position as it was saved at. The issue right now is top and left, which are supposed to be the 2 main attributes in changing/saving a buttons location. I specify both attributes in CSS for the button, but when I use firebug, neither left nor top have a value assigned to them. Furthermore, I specify the height and width of the button in the CSS as well. My button has the proper dimensions but its height and width values are both empty. Does anyone know why either of these scenarios could happen?

I also tried setting the values in javascript, which gave top and left a value but had no effect on the button's positioning. The other thing I don't get is that changing the buttons marginLeft and marginTop affects the buttons position, but this is not a legitimate option for positioning the button because i will need to have buttons close to each other, which wont work if they have a margin. So is there a reason that top and left wouldn't have an affect on a button's positioning?

EJay
  • 1,079
  • 2
  • 12
  • 23
  • 1
    Welcome to Stack Overflow. Please have a look at http://tinyurl.com/sohints for some hints on how to write a good question that's easy to answer. – Anders Abel Jul 19 '11 at 18:58
  • possible duplicate of [How do I get the coordinate position after using jQuery drag and drop?](http://stackoverflow.com/questions/849030/how-do-i-get-the-coordinate-position-after-using-jquery-drag-and-drop) – AlienWebguy Jul 19 '11 at 19:01
  • @AlienWebguy This question appears to be a css problem and not a javascript question, while that question is only about javascript. – John Stimac Jul 19 '11 at 19:03
  • @Anders Abel thanks. I'll make sure to take a look at it. Jcubed's answer fixed it as well in case anyone was wondering! – EJay Jul 21 '11 at 13:43

1 Answers1

1

You need to use position:relative;, position:absolute;, or position:fixed;. You also need to make sure its display is inline-block or block for width and height to work.

John Stimac
  • 5,335
  • 8
  • 40
  • 60
  • Its parent element must also have `position: relative;` for the button to respect its reference point, otherwise, it will default to the entirety of the page, or the first parent that has a position set. – Nightfirecat Jul 19 '11 at 19:00
  • That was just the ticket. Thanks a ton! – EJay Jul 21 '11 at 13:43