CSS - 图像推子的绝对和相对位置

Question

I'm working with an image fader program, but I'm not understanding absolute positioning. I have the images fading nicely and resizing the way I want if the screen resizes. but I have 2 problems. Div#2 gets covered up by the images. I want div2 to always appear below the image div. Also, I have control buttons on the images. I want them in the middle. I thought using top:50% would do that, but it's not. Here's an example...

 var slides = document.querySelectorAll('#slides .slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide,5000); function nextSlide(){goToSlide(currentSlide+1);} function previousSlide(){goToSlide(currentSlide-1);} function goToSlide(n){ slides[currentSlide].className = 'slide'; currentSlide = (n+slides.length)%slides.length; slides[currentSlide].className = 'slide showing';} var next = document.getElementById('next'); var previous = document.getElementById('previous'); next.onclick = function(){nextSlide();}; previous.onclick = function(){previousSlide();}; 

 #slides {position: relative} .slide{ position: absolute; left: 0px; top: 0px; width:100%; height:auto; min-height:300px; object-fit:cover; opacity: 0; box-sizing:border-box; transition: opacity 2s;} .showing{opacity: 1;} .controls{ background: transparent; color: #fff; font-size: 30px; cursor: pointer; border: 1px solid #555; width: 30px; position: absolute; } .controls:hover{ opacity:.5} .fadenext{right: 10px; top: 50%;} .fadeprev{left: 10px; top: 50%;} 

 <br><br> <div id="slides"> <img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing"> <img src='https://www.panotools.org/dersch/StBp.JPG' class="slide"> <button class="controls fadeprev" id="previous">&lt;</button> <button class="controls fadenext" id="next">&gt;</button> </div> <div style='margin-top:40px;border:1px solid red;width:200px;height:100px'> This is Div # 2</div> 

Answer 1

I've amended your snippet to fix your issues.

• Adding margin-top instead of top will fix your issue with the controls.
• Div 2 will now always remain below your slider.

PS I moved your div2 inline styles to keep it neat.

 var slides = document.querySelectorAll('#slides .slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 5000); function nextSlide() { goToSlide(currentSlide + 1); } function previousSlide() { goToSlide(currentSlide - 1); } function goToSlide(n) { slides[currentSlide].className = 'slide'; currentSlide = (n + slides.length) % slides.length; slides[currentSlide].className = 'slide showing'; } var next = document.getElementById('next'); var previous = document.getElementById('previous'); next.onclick = function() { nextSlide(); }; previous.onclick = function() { previousSlide(); }; 

 * { margin: 0; padding: 0; } #slides { position: relative } .slide { position: absolute; left: 0px; top: 0px; width: 100%; height: auto; min-height: 300px; object-fit: cover; opacity: 0; box-sizing: border-box; transition: opacity 2s; } .showing { opacity: 1; } .controls { background: transparent; color: #fff; font-size: 30px; cursor: pointer; border: 1px solid #555; width: 30px; position: absolute; } .controls:hover { opacity: .5 } .fadenext { right: 10px; margin-top: 25%; } .fadeprev { left: 10px; margin-top: 25%; } .div2 { margin-top: 50%; border: 1px solid red; width: 200px; height: 100px; } 

 <br><br> <div id="slides"> <img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing"> <img src='https://www.panotools.org/dersch/StBp.JPG' class="slide"> <button class="controls fadeprev" id="previous">&lt;</button> <button class="controls fadenext" id="next">&gt;</button> </div> <div class="div2">This is Div # 2</div> 

Answer 2

It's not feasible to use % based positions when you use "top" style. So to achieve what you want to do, use margin-top instead. As shown below:

.fadenext{right: 10px; margin-top: 25%;}
.fadeprev{left: 10px; margin-top: 25%;}

And for your div2, just change it's style to:

margin-top: 50%