Stellen Sie Elemente unter absolut positionierten div klickbar

Question

Ich arbeite an einem Projekt, wo ich Screenshots hochladen muss, die in den Browser kopiert werden. Das System funktioniert, aber ich habe ein Problem, auf die Bilder zu klicken, um sie im Vollbildmodus anzuzeigen.

Ich machte eine JSFiddle von dem, was es sieht aus wie:

<div id="screenshot-container" class="vertical-scroll-div"> 
    <div id="editor" contenteditable="true"> </div> 
    <img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" /> 
    <img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" /> 
    <img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" /> 
    <img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" /> 
    <img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" /> 
</div> 

.vertical-scroll-div { 
    width: 100%; 
    padding-top: 10px; 
    height: 220px; 
    min-height: 220px; 
    overflow-x: auto; 
    white-space: nowrap; 
    border: 2px dashed #a9a9a9; 
} 
#editor { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    height: 220px; 
    outline: 0; 
} 
.screenshot { 
    margin-left: 10px; 
    height: 200px; 
    width: 200px; 
    max-height: 200px; 
    max-width: 200px; 
} 
.screenshot:hover { 
    cursor: pointer; 
    border: solid 2px #3498db; 
} 

Der Editor div kann als Elternteil nicht verwendet werden, da es, wenn ein neues image Einfügen gelöscht werden.

Hoffe jemand hat eine Idee.

Dank

Answer 1

Fügen Sie einfach diese Eigenschaften zum .screenshot Selektor:

.screenshot { 
    position: relative; 
    z-index: 10; 
} 

Answer 2

Verwendung dieses css

.screenshot { 
    height: 200px; 
    margin-left: 10px; 
    max-height: 200px; 
    max-width: 200px; 
    position: relative; 
    width: 200px; 
    z-index: 5; 
}