Привет, может, кто-нибудь поможет мне? Я ломаю голову, пытаясь изменить положение div с абсолютного на статическое (по умолчанию). Мне нужно, чтобы при уменьшении страницы до 800px div (абсолютное значение) было выше другого div (относительный) изменить его положение, чтобы поместить его ниже div (относительного), но проблема в том, что я не могу изменить часть кода, потому что я показываю слайд, и этот слайд поддерживает соотношение сторон 16: 9 изображений, поэтому я используюверхний отступ 52,5, чтобы всегда поддерживать это соотношение сторон, и изображения соответствуют его оригинальному аспекту. Мне просто нужно, чтобы погружение, в котором текст над изображениями располагался ниже, там, где заканчивается изображение или заканчивается разделение изображения
https://jsfiddle.net/nackt7jq/9/
*{
margin:0;
padding:0;
}
.navi{
background:yellow;
width:100%;
height:100px;
margin-bottom:20px;
}
.jumbo{
background:grey;
width:100%;
height:500px;
margin-top:20px;
}
.slideshow{
background:green;
width:100%;
position: relative;
}
.slide-image-wrap{
width:100%;
box-sizing: border-box;
}
.mySlides {
width: 100%;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
}
#tata .slide-image-wrap .mySlides{
height:0;
padding-top: 56.25%;
}
#tata img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.slide-text-wrap{
height: 100px;
width:500px;
background:blue;
position: absolute;
bottom:20%;
right: 6%;
color:orange;
font-size: 2em;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bolder;
font-size: 2em;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(255,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 10px;
width: 20px;
margin: 0 10px;
background-color: #bbb;
/* border-radius: 50%; */
display: inline-block;
transition: background-color 0.6s ease;
/*position: absolute;*/
}
.active, .dot:hover {
background-color: right: ;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@media only screen and (orientation: portrait) {
}
@media only screen and (max-width: 800px){
.slide-text-wrap{
background-color: yellow;
top: 0;
right: 0;
bottom:0%;
left: 0;
margin: auto auto 0 auto;
width: 450px;
}
}