CSS Animations ganz Seite mit aktueller Ansicht Lage

Question

ich eine zwei-Animation mit CSS erstellt habe https://codepen.io/anon/pen/yOqxdq html ein css

<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg"> 

@keyframes shadow { 
    0% { opacity: 0;height: 0; transform : scale(0.1);} 
    100% { opacity: 1; height: 100%;transform : scale(1);} 
} 
@keyframes show { 
    0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;} 
    100% { opacity: 1;margin: 0; width: 100%;height: 100%;} 
} 
#show { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    text-align: center; 
    background-color: rgba(0, 0, 0, 0.76); 
    animation-name: show; 
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
    z-index: 5; 
} 
#show-item{ 

    position: relative; 
    margin: 0 auto; 
    animation-name: shadow; 
    animation-duration: 3s; 
    animation-fill-mode: forwards; 
    opacity: 0; 
    padding-top: 40px; 
} 
#show-item img{ 
    border: 4px solid black; 

} 
a#closeShow{ 
    position: relative; 
    float: right; 
    text-decoration: none; 
    color: #C8C8C8; 
    padding: 6px 10px; 
    background: rgba(0, 0, 0, 0.9); 
    border-radius: 26px; 
    height: 18px; 
    position: relative; 
    top: 25px; 
    left: 10px; 
    border: 2px solid #e0e0e0; 
    box-shadow: 0 0 2px black; 
} 

das Problem ist, wenn der Benutzer blättert die Ansicht geändert wird und div mit Position absoluter bleibt oben und Kasten showdow wird nicht auf einem Teil der Seite angezeigt

Answer 1

Versuchen Sie position: fixed; für #show.

DEMO: FIDDLE