Created
August 7, 2022 12:16
-
-
Save ysstudio22/02028abaeb9ba2fdf5d1e2925faac486 to your computer and use it in GitHub Desktop.
z-index practice
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="box-container"> | |
| <div id="box1">1</div> | |
| <div id="box2">2</div> | |
| <div id="box3">3</div> | |
| </div> | |
| <div class="btn-container"> | |
| <button class="btn" onclick="shiftOne()">left to right</button> | |
| <button class="btn" onclick="shiftTwo()">top to bottom</button> | |
| <button class="btn" onclick="shiftThree()">right to left</button> | |
| <button class="btn" onclick="originDisplay()">default</button> | |
| </div> | |
| <div class="toggle"> | |
| <label class="switch"> | |
| <input type="checkbox"> | |
| <span class="slider round" onclick="darkMode()"></span> | |
| </label> | |
| </div> | |
| </body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const pink = document.querySelector("#box1"); | |
| const navy = document.querySelector("#box2"); | |
| const orange = document.querySelector("#box3"); | |
| function shiftOne() { | |
| navy.style.margin = 0; | |
| navy.style.padding = 0; | |
| navy.style.top = 0; | |
| navy.style.left = "2em"; | |
| orange.style.margin = 0; | |
| orange.style.padding = 0; | |
| orange.style.top = 0; | |
| orange.style.left = "4em"; | |
| } | |
| function shiftTwo() { | |
| navy.style.margin = 0; | |
| navy.style.padding = 0; | |
| navy.style.top = "2em"; | |
| navy.style.left = 0; | |
| orange.style.margin = 0; | |
| orange.style.padding = 0; | |
| orange.style.top = "4em"; | |
| orange.style.left = 0; | |
| } | |
| function shiftThree() { | |
| navy.style.margin = 0; | |
| navy.style.padding = 0; | |
| navy.style.top = "2eem"; | |
| navy.style.left = "2em"; | |
| pink.style.margin = 0; | |
| pink.style.padding = 0; | |
| pink.style.top = "4em"; | |
| pink.style.left = "4em"; | |
| pink.style.zIndex = "2"; | |
| orange.style.margin = 0; | |
| orange.style.padding = 0; | |
| orange.style.top = 0; | |
| orange.style.left = 0; | |
| orange.style.zIndex = "-1"; | |
| } | |
| function originDisplay() { | |
| navy.style.margin = 0; | |
| navy.style.padding = 0; | |
| navy.style.top = "2rem"; | |
| navy.style.left = "2rem"; | |
| navy.style.zIndex = "1"; | |
| pink.style.margin = 0; | |
| pink.style.padding = 0; | |
| pink.style.top = 0; | |
| pink.style.left = 0; | |
| pink.style.zIndex = "-1"; | |
| orange.style.margin = 0; | |
| orange.style.padding = 0; | |
| orange.style.top = "4rem"; | |
| orange.style.left = "4rem"; | |
| orange.style.zIndex = "2"; | |
| } | |
| function darkMode() { | |
| let mainContent = document.body; | |
| mainContent.classList.toggle("dark-mode"); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| height: 200px; | |
| width: 250px; | |
| } | |
| .box-container{ | |
| position: relative; | |
| top: 0.5em; | |
| height: 150px; | |
| width: 200px; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| .box-container> :first-child{ | |
| position: absolute; | |
| background: pink; | |
| border: 4px solid hotpink; | |
| opacity: 0.7; | |
| z-index: -1; | |
| } | |
| .box-container> :nth-child(2) { | |
| position: absolute; | |
| top: 2rem; | |
| left: 2em; | |
| background: navy; | |
| border: 4px solid lightblue; | |
| opacity: 0.7; | |
| z-index: 1; | |
| } | |
| .box-container> :last-child{ | |
| top: 4em; | |
| left: 4em; | |
| position: absolute; | |
| background: orange; | |
| border: 4px solid yellow; | |
| opacity: 0.7; | |
| z-index: 2; | |
| } | |
| .btn-container{ | |
| display: flex; | |
| position: relative; | |
| justify-content: space-around; | |
| align-items: center; | |
| top: 8rem; | |
| height: 7em; | |
| width: 30em; | |
| } | |
| .btn{ | |
| height: 2em; | |
| width: 7em; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| } | |
| .toggle{ | |
| position: relative; | |
| top: 7rem; | |
| } | |
| .switch{ | |
| position: relative; | |
| display: inline-block; | |
| height: 34px; | |
| width: 60px; | |
| } | |
| .switch input{ | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider{ | |
| position: absolute; | |
| cursor: pointer; | |
| height: 34px; | |
| width: 60px; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #ccc; | |
| -webkit-transition: .4s; | |
| transition: .4s; | |
| } | |
| .slider:before{ | |
| position: absolute; | |
| content: ""; | |
| height: 26px; | |
| width: 26px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| -webkit-transition: .5s; | |
| transition: .5s; | |
| } | |
| input:checked + .slider{ | |
| background-color: #2196F3; | |
| } | |
| input:focus + .slider{ | |
| box-shadow: 0 0 1px #2196F3; | |
| } | |
| input:checked + .slider:before{ | |
| -webkit-transform: translateX(26px); | |
| -ms-transform: translateX(26px); | |
| transform: translate(26px); | |
| } | |
| .slider.round{ | |
| border-radius: 34px; | |
| } | |
| .slider.round:before{ | |
| border-radius: 50%; | |
| } | |
| .dark-mode{ | |
| background-color: black; | |
| color: white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment