如何在css中设置按钮底部底部的菜单位置

Question

我试图设置从按钮的点击打开的菜单的位置。 我需要菜单的底部与按钮底部的水平线相同。

我的代码示例中包含此Fiddle

中的错误

我试图和example做同样的事情。这适用于一个按钮，但没有2个按钮。

Answer 1

请查看此jsfiddle作为工作示例，如果您需要，请选择接受的答案。

twoBoxMenu Example

我所做的是在uiBarButton课程中取消了被评选的position:absolute，然后为每个框添加了包装类。并在代码后面给了那个包装器：

.wrapper{
  position:relative;
  width: 100px;
  height: 50px;
  border: black;
  padding: 0px;
  margin: 5px 0;
}

它的作用是当你有绝对位置的东西时，你可以用DOM中超级元素的位置相对来控制它的初始位置。这正是我所做的，因为你可以看到包装类具有位置相对而且不允许从你的盒子中流失，它使它们分开。我为包装div增加了一些余量，所以它们会按照你的意愿分开。

另外，在类uiMenu中，我已将底部更改为0，因此任何元素都将从0开始，位置为绝对值

.uiMenu {
 margin: 0;
 padding: 0;
 border: 1px solid #18BECD;
 display: none;
 position: absolute; 
 bottom:0; }