Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

В коде надо вывести маленькую кнопку выше кнопки-слайдера но к маленькой кнопке зет-индекс не работает

Михаил Остренко Знаток (285), закрыт 2 месяца назад
html

<div id="slider1">
<span id="filter-1"></span>
<div class="slider">
<img src="img/cleaning-1.png" alt="">
<img src="img/cleaning-2.jpg" alt="">
<img src="img/cleaning-3.jpg" alt="">
</div>
<button class="next-button" aria-label="Посмотреть следующий слайд"></button>
<div id="slider1text">
<h3>We clean a Whole lot more!</h3>
<h4>Cleaning Yours House</h4>
<h4>Make World & Clean Mine</h4>
<form action="#" target="blank">
<button>Book Today</button>
</form>
</div>
</div>

css

#slider1{
height: 800px;
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#filter-1{
position: absolute;
top: 0;
height: 800px;
width: 100%;
background-color: #2a2a2a;
background-color: #115582;
opacity: 0.3;
}
.next-button{
position: absolute;
top: 0;
background-color: transparent;
width: 100%;
height: 800px;
z-index: 1;
}
.slider {
transition: transform 1s ease-in-out;
display: flex;
}
.slider img {
width: 100%;
height: 800px;
}
#slider1text{
position: absolute;
top: 0;
text-align: center;
vertical-align: middle;
height: 800px;
width: 100%;
}
#slider1text h3{
margin-top: 170px;
color: #ffffff;
font-family: "Raleway-SemiBold", sans-serif;
font-size: 27px;
}
#slider1text h4{
font-family: "nunito-ExtraBold", sans-serif;
font-size: 64px;
color: #ffffff;
}
#slider1text button{
font-family: "Josefin-Sans-SemiBold", sans-serif;
cursor: pointer;
font-size: 18px;
color: #ffffff;
background-color: #f6a937;
border-radius: 4px;
height: 50px;
width: 170px;
margin-top: 30px;
}

js

const slider = document.querySelector('#slider1');
const nextButton = document.querySelector('.next-button');
const slides = Array.from(slider.querySelectorAll('img'));
const slideCount = slides.length;
let slideIndex = 0;

nextButton.addEventListener('click', showNextSlide);

function showNextSlide() {
slideIndex = (slideIndex + 1) % slideCount;
updateSlider();
}

function updateSlider() {
slides.forEach((slide, index) => {
if (index === slideIndex) {
slide.style .display = 'block';
} else {
slide.style .display = 'none';
}
});
}

updateSlider();

В коде надо вывести кнопку(Book Today) выше кнопки с классом(next-button) но к кнопке(Book Today) зет-индекс не применяеца
Лучший ответ
Денис Ерошин Мастер (1480) 2 месяца назад
Так тебе положение кнопки надо изменить на странице или вывести кнопку поверх другой?
Михаил ОстренкоЗнаток (285) 2 месяца назад
кнопку поверх другой
Денис ЕрошинМастер (1480) 2 месяца назад
.next-button{
background: red;
}
Добавь краски)
Денис Ерошин Мастер (1480) Денис Ерошин, <button class="next-button" aria-label="Посмотреть следующий слайд">Посмотреть следующий слайд</button> А так текст на кнопке можно вывести.
Михаил ОстренкоЗнаток (285) 2 месяца назад
я с этим уже сам разобрался перевел кнопку в отдельный блок и через css все сделал
#book_today{
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
Денис Ерошин Мастер (1480) Михаил Остренко, Красавчик, идёшь к успеху!
Остальные ответы
Похожие вопросы