Элемент с абсолютным позиционированием не отвечает
Я знаю, что было несколько вопросов по этому вопросу, но ни один из них полностью не отвечает на мою проблему... У меня есть 13 SVG, сложенных один над другим (я использую JS-скрипт, чтобы один появился, а другой исчез, таким образом создав " эффект анимации», когда что-то перемещается из одной позиции в другую), и я позиционировал их как абсолютные, чтобы они складывались. Проблема в том, что я работаю на 17-дюймовом экране, и когда я смотрю с помощью screenfly, как выглядит моя страница на больших экранах (24 дюйма), мои элементы больше не расположены правильно.
Я уже пытался позиционировать его со всеми известными мне единицами измерения (px, %, vw/vh, em, rem), но ничего из этого не работает для моего случая...
Вот схематический HTML-код:
<svg id = "step1">Lots of stuff</svg>
<svg id = "step2">Same here</svg>
.
.
.
<svg id = "step13">Some more stuff</svg>
И вот правила CSS, которые я использую:
#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 {
position: absolute;
top: 1vh;
left: 8.5vw;
margin: 0 auto;
visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
height: 150px;
}
Вот страница в Интернете для анимации, о которой я говорю, это анимация «Тетрис» для мобильных телефонов, поэтому, возможно, вам придется изменить размер браузера, чтобы увидеть ее хорошо...
Если у кого-нибудь есть идеи о том, как сделать его отзывчивым, я был бы очень благодарен.
Бенджамин
Ответы 2
Вы смотрели на flexbox с направлением столбца? Элементы останутся центрированными по вертикали независимо от высоты экрана. Также я удалил ids, так как они больше не нужны.
const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => {
step.style.animationDelay = `${delay}s`;
delay += .25;
});body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.step {
visibility: hidden;
opacity: 0;
border: 1px solid;
animation-name: makeVisible;
animation-duration: 1s;
animation-fill-mode: forwards;
padding: 1em;
}
@keyframes makeVisible {
to {
opacity: 1;
visibility: visible;
border-color: transparent;
}
}<div class = "step">One</div>
<div class = "step">Two</div>
<div class = "step">Three</div>
<div class = "step">Four</div>
<div class = "step">Five</div>@HassanSiddiqui Я скорректировал свой ответ, чтобы он динамически рос с элементами n через JavaScript.
Большое спасибо за вашу помощь, однако, похоже, это не работает для вертикального позиционирования... Я отредактирую вопрос, чтобы предоставить веб-страницу, чтобы каждый мог посмотреть
Вы можете использовать медиа-запрос для решения проблемы с реагированием. Попробуйте это, я надеюсь, что это поможет вам. Спасибо
@media only screen and (max-width: 768px) {
.step {
position: static;
display: block;
}
}
.step {
position: absolute;
top: 1vh;
left: 8.5vw;
margin: 0 auto;
visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
height: 150px;
}
@media only screen and (max-width: 768px) {
.step {
position: static;
display: block;
}
}<svg class = "step" id = "step1">Lots of stuff</svg>
<svg class = "step" id = "step2">Same here</svg>
.
.
.
<svg class = "step" id = "step13">Some more stuff</svg>Я, вероятно, решу это, но я пытался избежать этого, потому что, если я сделаю это так, мне придется указать много ширины, поскольку мой код даже не реагирует с одного экрана компьютера на другой. Но спасибо за помощь :) Сейчас попробую и поставлю вопрос как решённый, если получится!
Спасибо @BenjaminLoubet за ваш отзыв.
Извините за поздний ответ, я не мог сделать это в то время, когда думал, что смогу, но теперь мой элемент отзывчив, спасибо вам, @HassanSiddiqui!
Хорошее предложение, но в будущем, если длина шага увеличится, мы должны будем писать CSS с задержкой анимации для каждого шага.