Absolute Positioned Dynamic Buttons Stacking? - css

Question

So I'm making a jQuery slideshow using the jQuery cycle plugin.
Part of the code generates an <input type="button"> with a value from 1 to i (where i equals the total number of slides)
I'm trying to style these buttons so that they appear on top of the image in the slideshow. However when I try to absolute position the buttons they all stack on top of each other. I understand why this is happening, I just don't understand how to get around it.
This is how I'm targeting the buttons the JavaScript is generating.
input[type=button] {
position: absolute;
left: 400px;
}
How do I prevent the buttons from stacking?

Answer 1

If Position is absolute, you must define left and top for each separately, else it will stack up,
Or you may use position:relative with margin:5px; float:left;
thank you,

Answer 2

Instead of trying absolute positioning, try floating the image.
input[type=button] {
position: relative;
float: center;
padding: 10px;
}
This should eliminate the stacking and you can also easily add borders and customize this to be whatever you want. This is just a general description of what I thought was necessary .

Answer 3

I used tags instead of buttons, but I don't think it should make too much of a difference. Anyways, if you want to go about making it vertical, I would just go like this:
HTML:
<h1>Example</h1><br />
<h1>Example1</h1><br />
<h1>Example2</h1><br />
CSS:
h1{
position: relative;
float: none;
padding-bottom: 10px;
}
This is fairly simple CSS work so it won't take you too far, but this is a good start. Also, I would never recommend using absolute positioning unless you're only dealing with one object instead of several since it creates a stacked look. Hope this helps.