Доброго времени суток!
Есть некий Блок (.spoiler-body.absolute) с position: absolute; и по нажатию на кнопку всё работает отлично!
Но как только уменьшается размер экрана, этому блоку хочу задать уже другое позиционирование, т.е. position: static; чтобы этот блок вернулся в поток и соответственно, нижние блоки, уже не будут “наезжать” на этот верхний.
И вот как мне реализовать это на jQuery ?
Вот примерно, накидал такую, не рабочую конструкцию https://jsfiddle.net/72kpe8qz/
Так в том-то и дело, что я и начал с media queries и перелопатил кучу вариантов! И всё не получалось… А оказалось всё банально просто. Были элементарные ошибки из-за невнимательности, которые исправил … кое-что удалил и всё получилось сразу!
У меня в медиа-запросе, при меньшем разрешении экрана, были стили, которые и мешали нужному позиционированию блока .spoiler-body поэтому я их и удалил.
Ну а теперь всё ок!
Ну а переопределил, так......
В стилях было:
.spoiler-body { /Скрытый синий Блок с навигацией/
position: absolute;
right: .5%;
top: .5%;
width: 29.5%;
margin-right: -4%;
display: none;
visibility: hidden;
transition: visibility 0.5s lenear!important;
}
А в медиа стало....
@media only screen and (max-width: 808px) {
.spoiler-body {
position: static!important; /изменяем позиционирование с absolute на static, чтобы .spoiler-body вернулся в поток и div.container-story опустился ниже/
width: 50%;
top: 45%;
margin-left: 4%;
}
}
Как оказалось, совсем нет, не обязательно. Просто, я так сильно хотел, чтобы это получилось, поэтому и поставил !important (сейчас удалил). Но это в Chrome…
А в IE11 не получается… Т.е. такие же стили в медиа-запросе, но не срабатывают в IE11.
Т.е. не получается изменить позиционирование блока .spoiler-body с absolute; на static; чтобы и в IE11, блок вернулся в поток. Как же это сделать?
Т.е. в IE11, по клику кнопки, блок .spoiler-body,исходя из стилей медиа-запросов, опускается ниже, он остаётся в position: absolute; поэтому нижняя секция со слайдером, не опускается, а наезжает на .spoiler-body
.ie-screen - это дополнительный класс div.spoiler-body, для IE11
https://jsfiddle.net/72kpe8qz/2/
Оказывается, чтобы абсолютно спозиционированный блок изменить на position: static; Он всё-равно не вернётся в поток, (речь идёт о IE11) пока Вы не зададите ему "маржины" в абсолютных величинах!
@media only screen and (max-width: 808px) {
:-ms-fullscreen, /для Ie/
:root .ie-screen {
/изменяем позиционирование с absolute на static, чтобы .spoiler-body вернулся в поток и div.container-story опустился ниже/
margin: 37% auto 210px 16%;
}
}