html - Z-Index does not work properly through animation/transition? -


i have white space, grey "tab" hanging right behind white space. have animation bringing whole thing out of view.

for reason, through duration of animation (2s), "tab" displayed in front of white space, until keyframe transition stops , z-index appropriately puts tab behind white space.

i looking way display tab behind white space throughout transition (appropriate z-index through animation).

.form{    position: relative;    top: 70px;    width: 60%;    height: 82%;    padding: 10px 20px;    background: #f4f7f8;    margin: 10px auto;    border-radius: 8px;    font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif;  }  #form-animation{    animation: slide 2s 1;  }  @keyframes slide{    0%{      transform: translate3d(0px, 500%, 0px);    }    100%{      transform: translate3d(0px, 0%, 0px);    }  }  .formhat{    height: 30px;    position: absolute;    top: -33px;    left: 0px;    color: white;    font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif;    font-size: 110%;    background-color: #8c8c8c;    padding: 6px;    border-radius: 8px 8px 0px 0px;    z-index: -10;    display: block;  }
<div class="form" id="form-animation">    <div class="formhat" id="formhat">this tab!    </div>    </div>

because formhat take z-index: -10 inside form move , give background, must create new div inside form

here worked example test , tell me

        .form{            width: 60%;            height: 82%;            position: relative;              margin-top: 40px;                    }          .form_front{            top: 70px;            padding: 10px 20px;            background: #f4f7f8;            margin: 10px auto;            border-radius: 8px;            font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif;          }          #form-animation{            animation: slide 2s 1;          }          @keyframes slide{            0%{              transform: translate3d(0px, 500%, 0px);            }            100%{              transform: translate3d(0px, 0%, 0px);            }          }          .formhat{            height: 30px;            position: absolute;            top: -33px;            left: 0px;            color: white;            font-family: "avant garde", avantgarde, "century gothic", centurygothic, applegothic, sans-serif;            font-size: 110%;            background-color: #8c8c8c;            padding: 6px;            border-radius: 8px 8px 0px 0px;            z-index: -10;            display: block;          }
    <!doctype html>      <html>      <body>        <div class="form" id="form-animation">      <div class="form_front"></div>        <div class="formhat" id="formhat">this tab!</div>        </div>        </body>      </html>


Comments

Post a Comment