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

Question

我有三个带有 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 Demo .

编辑：

正确的定位应该像 this

但在较低的分辨率下它看起来像 this 和更高的分辨率，就像 this

Answer 1

而不是给宽度和高度固定数字，例如：

width:200px;

height:200px;

最好使用百分比，这样它可以根据父容器调整宽度。

width:50%;
height:50%

对所有代码执行相同的逻辑，如果您希望在不同的屏幕尺寸下有不同的外观，请使用

@media only screen and (max-width: 600px) {
body {
    width:50%;
}

}

Answer 2

按钮 1 左值

您需要添加一个左侧位置值，以防止按钮一在调整大小时移动。

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

.button1, .button2, .button3 {display:block;}  
.row {
  padding: 10%;
}

.button-group {
  position: relative;
}

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

.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>

Answer 3

谢谢大家的回复。

但我通过将 position: absolute 给 .button-group 和 position: relative 给所有 button classes.

解决了这个问题

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

CSS multiple different position : absolute buttons screen resolution problem

html

css

css-position

按钮 1 左值