У меня есть три кнопки с 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.
Обновлено:
Правильное расположение должно выглядеть как это
Но в более низком разрешении это выглядит как это и выше разрешение, это как это
Можете ли вы добавить дополнительную информацию о том, при каком разрешении происходит сбой или возникают проблемы?
Что ты имеешь в виду правильно? Как это должно выглядеть?
Это плохая практика - ожидать одинаковой структуры на разных устройствах. Обычно CSS по умолчанию работает для 100% ширины области просмотра или для родителей с. Но когда у вас фиксированная ширина, он будет некорректно реагировать. Inorder сохранит ту же структуру, что и вам нужно, реагирует на запись для каждого ширины устройства, что невозможно. Или вы можете использовать процентное значение, но все же это не очень хорошая практика. Предлагаю вам сделать другой дизайн для небольших устройств.
Вместо того, чтобы указывать фиксированные числа для ширины и высоты, например:
width:200px;
height:200px;
Лучше использовать процент, чтобы он мог регулировать свою ширину в соответствии с родительским контейнером.
width:50%;
height:50%
Выполните ту же логику для всего кода, и если вы хотите по-другому взглянуть на другой размер экрана, используйте
@media only screen and (max-width: 600px) {
body {
width:50%;
}
}
Размеры кнопок фиксированные, размеры изменить не могу.
Вам нужно добавить значение левой позиции, чтобы первая кнопка не двигалась при изменении размера.
.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
.
это хороший пример, который показывает, насколько плохо используется position: absolute для создания макета.