Я в довольно сложной ситуации.Прежде всего, у меня есть две колонки, которые идут друг под другом, когда экран становится меньше.Моя проблема в том, что в одном из столбцов у меня есть относительный div.Я хочу еще один div прямо под ним, но он продолжает перекрываться с первым div.
Вот мой код:
<script>
var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 4;
function nextImage() {
var e;
// remove showMe class from current image
e = document.getElementById("slideimg" + curImage);
removeClass(e, "showMe");
// compute next image
curImage++;
if (curImage > numImages - 1) {
curImage = 0;
}
// add showMe class to next image
e = document.getElementById("slideimg" + curImage);
addClass(e, "showMe");
}
function addClass(elem, name) {
var c = elem.className;
if (c) c += " "; // if not blank, add a space separator
c += name;
elem.className = c;
}
function removeClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks
}
</script>
body,
html {
height: 100%
}
body {
background-image: url('img/bg.jpg');
min-height: 100%;
background-position: center;
background-size: cover;
font-family: 'Lato', sans-serif;
font-weight: 400;
margin: 0;
}
#content {
max-width: 1750px;
margin-left: auto;
margin-right: auto;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
height: 300px;
/* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.column {
width: 100%;
}
}
.homepage-main-img-wrapper {
position: relative;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
.homepage-main-img {
width: 100%;
border: 2px solid #194d98;
outline: 2px solid #0c7d5f;
position: absolute;
}
.slide {
border: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.showMe {opacity: 1;}
<div id="container">
<div id="content">
<div class="row">
<div class="column" style="background-color:#aaa;">
<div>stuff</div>
</div>
<div class="column container2">
<div class="homepage-main-img-wrapper">
<img id="slideimg0" class="slide showMe homepage-main-img" src="img/homepage-photos/1.jpg">
<img id="slideimg1" class="slide homepage-main-img" src="img/homepage-photos/2.jpg">
<img id="slideimg2" class="slide homepage-main-img" src="img/homepage-photos/3.jpg">
<img id="slideimg3" class="slide homepage-main-img" src="img/homepage-photos/4.jpg">
</div>
<div id="test">
<div id="instagram-feed" class="instagram_feed">
<img src="https://via.placeholder.com/300x300/f00" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
<img src="https://via.placeholder.com/300x300/f00" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
<img src="https://via.placeholder.com/300x300/f00" style="margin:0.5% 0.5%;width:32.333333333333336%;float:left;">
</div>
</div>
</div>
</div>
</div>
</div>
Вот как это выглядит:
Теперь,если я уберу высоту: 300px из столбца (что я должен делать).Тогда нижние изображения полностью покрываются.
Если я теперь уберу height: 100% из homepage-main-img-wrapper и добавлю положение: относительно instagram_feed, тогда я получу это:
Но моя цель состоит в том, чтобы поместить красные изображения под черное изображение и всегда показывать их там, независимо от размера страницы.Я пробовал все виды способов, но, похоже, не могу справиться с этим.: /
РЕДАКТИРОВАТЬ: я обновил код с классом .slide и скриптом для изменения изображений.На самом деле у меня есть карусель для изображений, которые я изначально вырезал из кода, чтобы сэкономить место.Но это кажется необходимым, потому что без позиции: absolute класс .slide не работает должным образом.