slideDown을 했다하더라도

slidedown된 코드를 보면 display가 block으로 바뀌어 있습니다.

input이 focus 되었을때

.login{ box-shadow: 0 0 20px rgba(0, 0, 0, 0.253); padding: 30px; width: 600px; background-color: rgba(128, 128, 128, 0.041); } .login span{ display: block; margin:20px 0 5px 0; } .login input[type=email], .login input[type=password]{ width: 100%; height: 40px; padding: 0 10px; padding-left: 40px; box-sizing: border-box; border-radius: 5px; border: 1px solid #ddd; } .login input[type=email]{ background: url(images/icon-email.png) no-repeat center left 10px; } .login input[type=password]{ background: url(images/icon-lock.png) no-repeat center left 10px; } .login input[type=email]:focus::placeholder, .login input[type=password]:focus::placeholder{ visibility: hidden; box-shadow: 0 0 20px rgba(30, 143, 255, 0.753); } .login input[type=email]:focus, .login input[type=password]:focus{ box-shadow: 0 0 20px rgba(30, 143, 255, 0.753); border: 5px solid rgba(30, 143, 255, 0.753); } .login p{ overflow: hidden; } .login p label{ float: left; font-size: 14px; } .login p a{ float: right; text-decoration: none; font-size: 14px; } .login input[type=button]{ width: 250px; height: 40px; font-size: 17px; background-color: rgba(30, 143, 255, 0.212); border: none; border-radius: 5px; }

.content:before 값에 z-index값을 줘도 뒤로 안가는 이유

왜 마이너스 값을 줘야 작동을 하는건가요숫자가 낮은게 무조건 후순위 아닌가요

.content:before 값에 z-index값을 줘도 뒤로 안가는 이유

/* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); body{ font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; background-color: #fff; } .gallery{ display: flex; list-style: none; height: 100vh; margin:0; padding:0; } .gallery li{ border-right: 5px solid #000; flex:1; transition: 0.5s; position: relative; overflow: hidden; } .gallery li:last-child{ border-right: none; } .gallery li:nth-child(1){ background: url(images/artistic-image-01.jpg) no-repeat center center; } .gallery li:nth-child(2){ background: url(images/artistic-image-02.jpg) no-repeat center center; } .gallery li:nth-child(3){ background: url(images/artistic-image-03.jpg) no-repeat center center; } .gallery li:nth-child(4){ background: url(images/artistic-image-04.jpg) no-repeat center center; } .gallery li:nth-child(5){ background: url(images/artistic-image-05.jpg) no-repeat center center; } .gallery:hover li { } .gallery li:hover{ flex:3; filter: grayscale(); } .content { position:absolute; background-color: #000; color: #fff; height: 200px; bottom:-200px; transition: 0.5s; text-align: center; z-index: 2; } .gallery li:hover .content{ bottom: 0; transition-delay: 0.5s; } .content:before{ content: ''; position: absolute; background-color: red; width: 100%; height: 100px; left:0; top:-60px; transform: rotate(-10deg) scale(1.5); z-index: 1; } Uploads made easy Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.

.content:before 값에 z-index값을 줘도 뒤로 안가는 이유

(사진)