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
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
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;
}

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

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