Добрый день. Тренируясь создавать слайдеры на СSS столкнулся с интересным багом. На странице элементы слайдера input[type=“radio”] вынесены в самый вверх страницы. Им задан класс visually-hidden. Класс с кнопками переключения расположен абсолютно в нужном месте.
При клике на label все отлично переключается, но страница прокручивается в самый верх.
Буду признателен за помощь.
<body>
<input type="radio" class="visually-hidden" id="product-1" name="toggle" checked>
<input type="radio" class="visually-hidden" id="product-2" name="toggle">
<input type="radio" class="visually-hidden" id="product-3" name="toggle">
<div class="page-wrapper">
<div class="container">
<header class="main-header">
</header>
<main>
<h1 class="visually-hidden">Главная страница с мороженым</h1>
<section class="slider">
<div class="slider-controls">
<label for="product-1">Первый</label>
<label for="product-2">Второй</label>
<label for="product-3">Третий</label>
</div>
<ul class="slider-list">
<li class="slider-item slide" id="slide1">
<h3 class="slider-title">Крем-брюле и пломбир с малиновым джемом</h3>
<a href="#" class="slider-button">Давайте оба</a>
</li>
<li class="slider-item slide" id="slide2">
<h3 class="slider-title">Шоколадный пломбир и лимонный сорбет</h3>
<a href="#" class="slider-button">Давайте оба</a>
</li>
<li class="slider-item slide" id="slide3">
<h3 class="slider-title">Пломбир с помадкой и клубничный щербет</h3>
<a href="#" class="slider-button">Давайте оба</a>
</li>
</ul>
</section>
</body>
вот CSS стили
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
opacity: 0;
-webkit-clip-path: inset(100);
clip-path: inset(100);
clip: rect(0 0 0 0);
overflow: hidden;
z-index: -999;
}
.page-wrapper {
min-width: 940px;
background-color: #849d8f;
background-image: url("../img/ice-slider-1.png");
background-repeat: no-repeat;
background-position: top center;
transition: background-image 0.5s ease background-color 0.5s ease;
}
.page-wrapper::before,
.page-wrapper::after {
content: "";
visibility: hidden;
}
.page-wrapper::before {
background-image: url("../img/ice-slider-2.png");
}
.page-wrapper::after {
background-image: url("../img/ice-slider-3.png");
}
.container {
width: 1146px;
margin: 0 auto;
padding: 0 27px;
}
.slider {
position: relative;
padding-top: 325px;
text-align: center;
color: #ffffff;
}
.slider-list {
padding: 0;
margin: 0;
list-style: none;
}
.slider-list .slider-title {
width: 700px;
margin: 0 auto;
margin-bottom: 27px;
font-size: 60px;
line-height: 60px;
font-weight: bold;
}
.slider-controls {
position: absolute;
bottom: 63px;
left: 0;
z-index: 20;
font-size: 0;
}
.slider-controls label {
display: inline-block;
width: 17px;
height: 17px;
margin-right: 8px;
vertical-align: top;
background-color: transparent;
border: 2px solid #ffffff;
border-radius: 50%;
cursor: pointer;
}
.slide {
display: none;
}
#product-1:checked ~ .page-wrapper {
background-color: #849d8f;
background-image: url("../img/ice-slider-1.png");
}
#product-2:checked ~ .page-wrapper {
background-color: #8996a6;
background-image: url("../img/ice-slider-2.png");
}
#product-3:checked ~ .page-wrapper {
background-color: #9d8b84;
background-image: url("../img/ice-slider-3.png");
}
#product-1:checked ~ .page-wrapper #slide1,
#product-2:checked ~ .page-wrapper #slide2,
#product-3:checked ~ .page-wrapper #slide3 {
display: block;
}
#product-1:checked ~ .page-wrapper label[for="product-1"],
#product-2:checked ~ .page-wrapper label[for="product-2"],
#product-3:checked ~ .page-wrapper label[for="product-3"] {
background-color: #ffffff;
}