CSS - абсолютная и относительная позиция с помощью фейдера изображения - PullRequest
Новая
       30

CSS - абсолютная и относительная позиция с помощью фейдера изображения

0 голосов
/ 22 апреля 2019

Я работаю с программой для работы с изображениями, но не понимаю абсолютного позиционирования.У меня есть изображения, постепенно исчезающие и изменяющие размеры, как я хочу, если размер экрана изменяется.но у меня есть 2 проблемы.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>

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Невозможно использовать позиции на основе%, когда вы используете стиль "top". Так что для достижения того, что вы хотите сделать, используйте вместо этого margin-top. Как показано ниже: 

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

А для вашего div2 просто измените его стиль на: 

margin-top: 50%
0 голосов
/ 22 апреля 2019

Я исправил ваш фрагмент, чтобы исправить ваши проблемы.

  • Добавление 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>
...