彼此重叠的按钮不是并排的？

Question

我有两个按钮，我希望并排，但是他们的权利在每个按钮之上，我无法弄清楚为什么......这就是我正在看的东西。

这是我的代码。

CSS：

  button {
  position: absolute;  
  top: 250px;
   left: -15px; 
   z-index: 9999;
  color:white;
  display: block;
  margin: 30px;
  padding: 7px 35px;
  font: 300 150% langdon;
  background: transparent;
  border: 3px solid white;
  cursor: pointer;
  } 

  button:hover {
  background: black;
  border: 1px solid black;
  }

  button:active {
  background: #2e2e2e;
  border: 1px solid black;
  color: white;
  }

有什么想法吗？

Answer 1

position:absolute从正常文档流中删除元素。因此，它们将在指定的位置（top: 250px;，left: -15px;）位于彼此之上，因为它们共享相同的位置样式。

对于您的场景，使用浮点数和边距可能更好：

button {
    float:left;
    margin-top:250px;
}

Answer 2

一般来说，应避免使用position: absolute;;你从标准流程中取出一个元素（这意味着没有更多的并排或从上到下的回流）。

如果您坚持使用它，您需要为按钮设置两种不同的定位规则，以便将它们分配到不同的位置。

Answer 3

尝试position:static;我读到它按顺序呈现元素，因为它们出现在文档流程中。