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 для создания макета.

Temani Afif 10.09.2018 10:56

Можете ли вы добавить дополнительную информацию о том, при каком разрешении происходит сбой или возникают проблемы?

Girisha C 10.09.2018 10:56

Что ты имеешь в виду правильно? Как это должно выглядеть?

cnrhgn 10.09.2018 10:57

Это плохая практика - ожидать одинаковой структуры на разных устройствах. Обычно CSS по умолчанию работает для 100% ширины области просмотра или для родителей с. Но когда у вас фиксированная ширина, он будет некорректно реагировать. Inorder сохранит ту же структуру, что и вам нужно, реагирует на запись для каждого ширины устройства, что невозможно. Или вы можете использовать процентное значение, но все же это не очень хорошая практика. Предлагаю вам сделать другой дизайн для небольших устройств.

Ramesh 10.09.2018 11:20
2
4
1 065
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вместо того, чтобы указывать фиксированные числа для ширины и высоты, например:

width:200px;

height:200px;

Лучше использовать процент, чтобы он мог регулировать свою ширину в соответствии с родительским контейнером.

width:50%;
height:50%

Выполните ту же логику для всего кода, и если вы хотите по-другому взглянуть на другой размер экрана, используйте

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

}

Размеры кнопок фиксированные, размеры изменить не могу.

Sraddha 10.09.2018 12:03

Кнопка 1 Левое значение

Вам нужно добавить значение левой позиции, чтобы первая кнопка не двигалась при изменении размера.

.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>
Ответ принят как подходящий

Спасибо за все ответы.

Но я решил эту проблему, отдав position: absolute на .button-group и position: relative на все button classes.

Другие вопросы по теме