I have created a custom toggle switch component that looks like this:
<template>
<div>
<label class="switch">
<input
type="checkbox"
:checked="value"
@change="changeSwitch"
>
<span class="slider round" />
<img
:src="require('../../assets/img/sun.svg')"
class="toggle-img"
alt="moon"
width="18"
height="18"
>
<img
:src="require('../../assets/img/moon.svg')"
class="toggle-img right"
alt="moon"
width="18"
height="18"
>
</label>
</div>
</template>
Styles of this component:
@use "../variables" as v;
@import "../mixins";
.switch {
position: relative;
display: inline-block;
@include size(34px, 60px);
input {
display: none;
}
.toggle-img {
z-index: 5;
@include positions($top: 0, $bottom: 0);
@include margin(auto, 0, auto, 5px);
position: absolute;
&.right {
@include positions($right: 0);
@include margin(7px, 5px, auto, 0);
}
}
.slider {
z-index: 4;
@include positions(0, 0, 0, 0);
position: absolute;
cursor: pointer;
background-color: var(--color-header-bg-pale);
-webkit-transition: 0.4s;
transition: 0.4s;
&:before {
@include size(26px, 26px);
@include positions($left: 4px, $bottom: 4px);
position: absolute;
content: "";
background-color: var(--color-font-color);
-webkit-transition: 0.4s;
transition: 0.4s;
}
&.round {
border-radius: 34px;
&:before {
border-radius: 50%;
}
}
}
input:checked + .slider:before {
-ms-transform: translateX(26px);
transform: translateX(26px);
}
}
What I want to do, is to make icons be under slider, but no matter how I tried to do that playing around with z-index
it doesn't work and I can't get why.
I was trying to set z-index
on every part like parent and child, also, I was trying to remove all other z-index
in project, but it still makes no any impact.
Here is how it looks like:
Do you try to set right image z-index to lowest when the input checked? If not you should try this
input:checked + .right:before {
z-index: -99;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.