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

我已经修改了你的 sn-p 来解决你的问题。

• 添加 margin-top 而不是 top 将解决您的问题 控制。
• Div 2 现在将始终保留在您的滑块下方。

附注我移动了你的 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

当您使用“top”样式时，使用基于 % 的位置是不可行的。因此，要实现您想要做的事情，请改用 margin-top 。如下图：

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

对于您的 div2，只需将其样式更改为：

margin-top: 50%