如何让我的按钮保持静止位置

Question

我的问题是，当我尝试在我的选择框中选择时，我的按钮向下移动到选择下拉列表。

即使选择框中的下拉列表出现，我也希望按钮保持不变。

当前输出： http://jsfiddle.net/GZSH6/2/

HTML：

<div class="form-group input-group fixedBtn">
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-list-alt"></span>&nbsp; Create Account</button> 
</div>
</div>

的CSS：

.fixedBtn {
position: fixed;
display: block;
}

Answer 1

我不会为固定或绝对定位而烦恼，因为它可能是善变的，并且不是很容易扩展。相反，在包裹元素上放置一个高度并将溢出设置为可见。

.col-sm-offset-1.col-sm-12 { height: 32px; overflow: visible; margin-bottom: 1.0em; }

这是jsFiddle：http://jsfiddle.net/mifi79/JvFV9/2/

绝对定位答案的问题在于，如果你要在它上面添加另一个表单字段，它会破坏显示（这里是Fiddle演示其他解决方案如何破解）

Answer 2

试试这个：

.col-sm-12:not(.col-sm-offset-1) { position:absolute; top:50px; }

（您可以使用top值进行调整，以获得您想要的效果。）

<强> jsFiddle demo.

Answer 3

仅仅将其位置设置为固定（或者就此而言是绝对的）是不够的。您需要明确设置其坐标。

<button style="position:fixed;top:45px;" type="button" class="btn btn-warning input-md">
    <span class="glyphicon glyphicon-list-alt"></span>&nbsp; Create Account
</button> 

在这种情况下，我将其top坐标设置为45px。