CSS - 圖像推子的絕對和相對位置

Question

我正在使用圖像推子程序，但我不理解絕對定位。 如果屏幕調整大小，我可以很好地淡化圖像並調整我想要的方式。 但我有兩個問題。 Div＃2被圖像覆蓋。 我希望div2始終出現在圖像div下方。 另外，我在圖像上有控制按鈕。 我希望他們在中間。 我認為使用top：50％會這樣做，但事實並非如此。 這是一個例子......

 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

我修改了你的代碼片段以解決你的問題。

• 添加margin-top而不是top將解決您的控件問題。
• Div 2現在將始終保持在滑塊下方。

PS我移動你的div2內聯樣式以保持整潔。

 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

使用“頂級”樣式時，使用基於％的位置是不可行的。 因此，要實現您想要的功能，請使用margin-top。 如下所示：

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

對於你的div2，只需改變它的風格：

margin-top: 50%