css - 绝对定位的动态按钮堆叠？

Question

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

部分代码生成<input type="button">一个值 from 1to i（其中i等于幻灯片总数）

我正在尝试设置这些按钮的样式，以便它们出现在幻灯片中的图像顶部。但是，当我尝试绝对定位按钮时，它们都堆叠在一起。我明白为什么会发生这种情况，我只是不明白如何解决它。

这就是我定位 JavaScript 正在生成的按钮的方式。

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

如何防止按钮堆叠？

score 1 · Accepted Answer

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

或者你可以position:relative使用margin:5px; float:left;

谢谢你，

score 0 · Accepted Answer

与其尝试绝对定位，不如尝试浮动图像。

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

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

score 0 · Accepted Answer

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

HTML：

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

CSS：

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

这是相当简单的 CSS 工作，因此不会让您走得太远，但这是一个好的开始。此外，除非您只处理一个对象而不是多个对象，否则我绝不建议使用绝对定位，因为它会创建堆叠的外观。希望这可以帮助。

3 回答 3