CSS多个不同位置：绝对按钮的屏幕分辨率问题

斯达达

我有三个带的按钮position: absolute，分别位于三个不同的位置。

但是在不同的分辨率下，所有按钮的位置都不正确。

.row {
  padding: 10%;
}

.button-group {
  position: relative;
}

.button1 {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 10px;
}

.button2 {
  height: 50px;
  width: 200px;
  z-index: 1;
  position: absolute;
  top: 50px;
  left: 280px;
}

.button3 {
  height: 150px;
  width: 300px;
  z-index: -1;
  position: absolute;
  top: 50px;
  left: 270px;
}

<div class="container">
  <div class="row button-group">
    <button class="btn btn-primary button1">BUTTON 1</button>
    <button class="btn btn-danger button2">BUTTON 2</button>
    <button class="btn btn-success button3">BUTTON 3</button>
  </div>
</div>

有人可以帮我吗？

这是Jsfiddle演示。

编辑：

正确定位应如下所示

但是在较低的分辨率下看起来像这样，在较高的分辨率下看起来像这样

斯达达

感谢您的所有答复。

但我通过给解决了这个问题position: absolute，以.button-group和position: relative所有button classes。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。