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

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

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