html - Div 定位 - Css

Question

这是失败的 jsfiddle link .我想让 buttonCenter div 位于下图中的黑框中:

如何更改 buttonCenter 的 css 类:

#buttonCenter {
    width: 250px;
    height: 100px;
    margin-right:auto;
    margin-left:auto;
    margin-top:100px;
    background-color:gray;
}

提前致谢

Answer 1

您将需要 position: relative; 并添加 z-index (为了安全起见)。

#buttonCenter {
    width: 250px;
    height: 100px;
    margin-right:auto;
    margin-left:auto;
    margin-top:100px;
    background-color:gray;
    border: 1px solid #000;
    z-index: 1;
    position: relative;
}

Demo

虽然我想告诉您定位很奇怪，但您没有充分理由 float 元素。

例如，您正在为 #row1、#row2 和 #buttonsContainer 应用 float: left; 不需要，因为它们占据了整个水平空间。

不要使用 id 来标识每个元素，最好使用类，这样你就可以在拥有共同样式的元素之间共享一个共同的 class，因为你不能使用相同的id 在单个文档中，它们应该是唯一的。

此外，您使用了巨大的边距，请考虑使用 position: absolute; 代替