스위치 확인란 요소가 다른 스위치 요소와 겹치지 않게하려면 어떻게해야합니까?

내 페이지에 나무를 넣고 싶습니다. 스위치는 체크 박스를 기반으로하며 더 추가하려고하면 다른 스위치를 유지합니다. 이것은 바이올린의 코드입니다. https://jsfiddle.net/kdh8zyo0/스위치 확인란 요소가 다른 스위치 요소와 겹치지 않게하려면 어떻게해야합니까?

내가 원하는 것은 위의 두 개 이상의 스위치를 하나 이상 추가하는 것입니다. 마찬가지로 :

스위치 1

스위치 2

스위치 3

전체 코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title></title> 
 
</head> 
 
<style> 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background: #179b77; 
 
} 
 

 
.colorful-switch { 
 
    display: block; \t 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 280px; 
 
    height: 120px; 
 
    margin-left: -140px; 
 
    margin-top: -60px; 
 
    border-radius: 50px; 
 
    background: #000000; 
 
} 
 
.colorful-switch:before { 
 
    content: ""; 
 
    z-index: -1; 
 
    position: absolute; 
 
    left: -5px; 
 
    top: -5px; 
 
    width: 290px; 
 
    height: 130px; 
 
    border-radius: 55px; 
 
    /* \t \t \t COR DA BORDA */ 
 
    background: #000000; 
 
    -webkit-transition: background-color 0.3s; 
 
    transition: background-color 0.3s; 
 
} 
 
.colorful-switch:hover:before { 
 
/* \t \t \t COR DA BORDA hover */ 
 
    background: #13232f; 
 
} 
 
.colorful-switch__checkbox { 
 
\t z-index: -10; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t opacity: 0; 
 
} 
 
.colorful-switch__label { 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50px; 
 
    cursor: pointer; 
 
} 
 
.colorful-switch__bg { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 840px; 
 
    height: 100%; 
 
    
 
/* background: -webkit-linear-gradient(0deg, #ffffff 0, #ffffff 280px, #ffffff 560px, #ffffff 100%);*/ 
 
    
 
    background: linear-gradient(120deg, #179b77 0, #33FF99 280px, #FF3300 560px, #ff0000 \t 100%); 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    transition: transform 0.5s, -webkit-transform 0.5s; 
 
    -webkit-transform: translate3d(-560px, 0, 0); 
 
      transform: translate3d(-560px, 0, 0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
} 
 
.colorful-switch__dot { 
 
    position: absolute; 
 
    left: 204px; 
 
    top: 50%; 
 
    width: 8px; 
 
    height: 8px; 
 
    margin-left: -4px; 
 
    margin-top: -4px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    transition: transform 0.5s, -webkit-transform 0.5s; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot { 
 
    -webkit-transform: translate3d(-125px, 0, 0); 
 
      transform: translate3d(-125px, 0, 0); 
 
} 
 
.colorful-switch__on { 
 
    position: absolute; 
 
    left: 177px; 
 
    top: 35px; 
 
    width: 30px; 
 
    height: 56px; 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    transition: transform 0.5s, -webkit-transform 0.5s; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on { 
 
    -webkit-transform: translate3d(-125px, 0, 0); 
 
      transform: translate3d(-125px, 0, 0); 
 
} 
 
.colorful-switch__on__inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); 
 
    transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); 
 
    transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); 
 
    transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); 
 
    -webkit-transform-origin: 100% 50%; 
 
      transform-origin: 100% 50%; 
 
    -webkit-transform: rotate(45deg) scale(0) translateZ(0); 
 
      transform: rotate(45deg) scale(0) translateZ(0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner { 
 
    -webkit-transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); 
 
    transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); 
 
    transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); 
 
    transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); 
 
    -webkit-transform: rotate(45deg) scale(1) translateZ(0); 
 
      transform: rotate(45deg) scale(1) translateZ(0); 
 
} 
 
.colorful-switch__on__inner:before, .colorful-switch__on__inner:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 4px; 
 
    background: #ffffff; 
 
} 
 
.colorful-switch__on__inner:before { 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 9px; 
 
} 
 
.colorful-switch__on__inner:after { 
 
    right: 0; 
 
    top: 0; 
 
    width: 9px; 
 
    height: 100%; 
 
} 
 
.colorful-switch__off { 
 
    position: absolute; 
 
    left: 204px; 
 
    top: 50%; 
 
    width: 64px; 
 
    height: 64px; 
 
    margin-left: -32px; 
 
    margin-top: -32px; 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    transition: transform 0.5s, -webkit-transform 0.5s; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off { 
 
    -webkit-transform: translate3d(-125px, 0, 0); 
 
      transform: translate3d(-125px, 0, 0); 
 
} 
 
.colorful-switch__off:before, .colorful-switch__off:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    height: 8px; 
 
    margin-top: -4px; 
 
    border-radius: 4px; 
 
    background: #ffffff; 
 
    -webkit-transition: -webkit-transform 0.25s 0.25s; 
 
    transition: -webkit-transform 0.25s 0.25s; 
 
    transition: transform 0.25s 0.25s; 
 
    transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s; 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after { 
 
    -webkit-transition-delay: 0s; 
 
      transition-delay: 0s; 
 
} 
 
.colorful-switch__off:before { 
 
    -webkit-transform: rotate(45deg) scaleX(1) translateZ(0); 
 
      transform: rotate(45deg) scaleX(1) translateZ(0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before { 
 
    -webkit-transform: rotate(45deg) scaleX(0) translateZ(0); 
 
      transform: rotate(45deg) scaleX(0) translateZ(0); 
 
} 
 
.colorful-switch__off:after { 
 
    -webkit-transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61); 
 
      transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61); 
 
    -webkit-transform: rotate(-45deg) scaleX(1) translateZ(0); 
 
      transform: rotate(-45deg) scaleX(1) translateZ(0); 
 
} 
 
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after { 
 
    -webkit-transition-timing-function: ease; 
 
      transition-timing-function: ease; 
 
    -webkit-transform: rotate(-45deg) scaleX(0) translateZ(0); 
 
      transform: rotate(-45deg) scaleX(0) translateZ(0); 
 
} 
 

 
</style> 
 
<body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="200px">Room</font> 
 
\t 
 
    
 
    
 
    <div class="colorful-switch" > 
 
     <input type="checkbox" style=" position: relative; 
 
    top: 20px;" class="colorful-switch__checkbox" id="cozinha"/> 
 
      <label class="colorful-switch__label" for="cozinha"> 
 
      <span class="colorful-switch__bg" ></span> 
 
      <span class="colorful-switch__dot" ></span> 
 
      <span class="colorful-switch__on"> 
 
       <span class="colorful-switch__on__inner" ></span> 
 
      </span> 
 
      <span class="colorful-switch__off"></span> 
 
      </label> 
 
     </div> 
 
    
 
      
 
      
 
    
 

 

 
</body> 
 
</html>

출처

2016-08-14 Heitor Giacomini

CSS에서 게재 위치가 정의되었으므로 서로 위에 머물러 있습니다. .colorful 스위치에서

left: 50%; 
top: 50%;

을 각 버튼에 대해 다른 CSS 클래스를 다른 값을 정의하거나이 : 당신은을 제거하거나해야합니다.

이

각 버튼의 위치에 대한 별도의 CSS를 갖는 예를 들어 다음과 같습니다 https://jsfiddle.net/d6LaLgLk/

나 :

출처

2016-08-14 22:56:22 Arc

사람 주셔서 감사합니다 픽셀 대신 %를 사용 https://jsfiddle.net/d6LaLgLk/1/. 이 문제는 제 학기 논문의 일부입니다. –

: http://heitor.comxa.com/ ('entrar'만 클릭하십시오) –

또는 http://heitor.comxa.com/subpagina/home.html TY. –

스위치 확인란 요소가 다른 스위치 요소와 겹치지 않게하려면 어떻게해야합니까?

답변

관련 문제