绝对定位动态按钮堆叠？

Question

所以我正在使用jQuery循环插件制作jQuery幻灯片。

部分代码会生成<input type="button">，其值从1到i（其中i等于幻灯片总数）

我正在尝试设置这些按钮的样式，以便它们显示在幻灯片中的图像顶部。然而，当我尝试绝对定位按钮时，它们全部堆叠在一起。我理解为什么会这样，我只是不明白如何绕过它。

这就是我如何定位JavaScript生成的按钮。

input[type=button] {
position: absolute;
left: 400px;
}

如何阻止按钮堆叠？

Answer 1

如果Position是绝对的，你必须分别为每个定义left和top，否则它将叠加，

或者您可以将position:relative与margin:5px; float:left;

一起使用

谢谢，

Answer 2

尝试浮动图像，而不是尝试绝对定位。

input[type=button] {
position: relative;
float: center;
padding: 10px;
}

这应该可以消除堆叠，您还可以轻松添加边框并将其自定义为您想要的任何内容。这只是我认为必要的一般描述。

Answer 3

我使用的是标签而不是按钮，但我认为它不会产生太大的差别。无论如何，如果你想让它垂直，我会这样：

HTML：

<h1>Example</h1><br />
        <h1>Example1</h1><br />
        <h1>Example2</h1><br />

CSS：

h1{
      position: relative;
      float: none;
      padding-bottom: 10px;
}

这是一个相当简单的CSS工作，所以它不会带你太远，但这是一个好的开始。此外，我永远不会建议使用绝对定位，除非您只处理一个对象而不是几个，因为它创建了堆叠外观。希望这会有所帮助。