Tengo tres botones con position: absolute, con tres posiciones diferentes.

Pero en una resolución diferente, todos los botones no se posicionan correctamente.

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

¿Puede alguien ayudarme con eso?

Aquí está la Jsfiddle Demo.

Editar:

El posicionamiento correcto debería verse como esto

Pero en una resolución más baja se ve como esto y una resolución más alta, es como esto

1
Sraddha 10 sep. 2018 a las 11:53

3 respuestas

La mejor respuesta

Gracias por todas las respuestas.

Pero resolví este problema dando position: absolute a .button-group y position: relative a todos los button classes.

0
Sraddha 20 sep. 2018 a las 06:03

Botón 1 Valor izquierdo

Debe agregar un valor de posición a la izquierda para evitar que el botón uno se mueva al cambiar el tamaño.

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

enter image description here

.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>
0
Invariant Change 10 sep. 2018 a las 09:06

En lugar de dar números fijos al ancho y alto, tales como:

width:200px;

height:200px;

Es mejor utilizar el porcentaje para que pueda ajustar su ancho de acuerdo con su contenedor principal.

width:50%;
height:50%

Haga la misma lógica para todo el código y si desea una apariencia diferente en diferentes tamaños de pantalla, use

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

}

0
Rarblack 10 sep. 2018 a las 09:01