Проблема в том что я пытаюсь с позиционировать псевдо элемент(серый квадрат) под его родителя, но не выходит он наслаивается на родителя. Пробовал решить проблему с помощью z-index, не помогло.
.shop__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
background: blueviolet;
max-width: 312px;
width: 100%;
margin: 0 auto 46px;
}
.shop__logo {
font-family: "Poppins Bold", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 120%;
color: #FFFFFF;
}
.shop__text {
font-family: "Moms", sans-serif;
font-size: 20px;
line-height: 120%;
color: #FFFFFF;
}
.shop__sizes {
max-width: 195px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.shop__subtitle {
font-family: "Poppins Regular", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 120%;
color: #FFFFFF;
margin-right: 11px;
}
.shop__blocks {
max-width: 150px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 0 5px 0;
}
.shop__label {
font-family: "Poppins Regular", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 120%;
color: #FFFFFF;
position: relative;
}
.shop__label {
position: relative;
}
.shop__input {
position: absolute;
max-width: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
}
.shop__span-size {
position: relative;
z-index: 2;
-webkit-transition: all ease-in-out 0.6s;
transition: all ease-in-out 0.6s;
}
.shop__span-size::before,
.shop__span-color::before {
content: "";
display: block;
background: #373737;
border-radius: 5px;
width: 25px;
height: 25px;
position: absolute;
top: -3px;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all ease-in-out 0.6s;
transition: all ease-in-out 0.6s;
z-index: 1;
}
.shop__span-size-s::before {
left: -7px;
}
.shop__span-size-m::before {
left: -6px;
}
.shop__span-size-l::before {
left: -8px;
}
.shop__span-size-xl::before {
left: -4px;
}
.shop__input:checked + .shop__span-size::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.shop__colors {
max-width: 75px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.shop__span-color {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 5px;
position: relative;
-webkit-transition: all ease-in-out 0.6s;
transition: all ease-in-out 0.6s;
}
.shop__span-color-black {
background: #000000;
}
.shop__span-color-white {
background: #FFFFFF;
}
.shop__input:checked + .shop__span-color::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.shop__span-color::before {
top: -3px;
left: -3px;
}
<div class="shop__wrapper">
<div class="shop__sizes">
<div class="shop__subtitle">Size:</div>
<div class="shop__blocks">
<div class="shop__block">
<label class="shop__label">
<input class="shop__input" type="radio" value="1" name="Size-2">
<span class="shop__span-size shop__span-size-s">S</span>
</label>
</div>
<div class="shop__block">
<label class="shop__label">
<input class="shop__input" type="radio" value="2" name="Size-2">
<span class="shop__span-size shop__span-size-m">M</span>
</label>
</div>
<div class="shop__block">
<label class="shop__label">
<input class="shop__input" type="radio" value="3" name="Size-2">
<span class="shop__span-size shop__span-size-l">L</span>
</label>
</div>
<div class="shop__block">
<label class="shop__label">
<input class="shop__input" type="radio" value="4" name="Size-2">
<span class="shop__span-size shop__span-size-xl">XL</span>
</label>
</div>
</div>
</div>
<div class="shop__colors">
<div class="shop__block-color">
<label class="shop__label">
<input class="shop__input" name="Color-2" type="radio" value="1">
<span class="shop__span-color shop__span-color-black"></span>
</label>
</div>
<div class="shop__block-color">
<label class="shop__label">
<input class="shop__input" name="Color-2" type="radio" value="2">
<span class="shop__span-color shop__span-color-white"></span>
</label>
</div>
</div>
</div>
Вот как должно быть