Question

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?

Answer 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.