javascript - Make elements below absolute positioned div clickable -


i working on project need upload screenshots copy pasted browser. system works have problem click images show them in full-screen.

i made jsfiddle of looks like:

<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; } 

the editor div can't used parent because cleared when inserting new image.

hope got idea.

thanks

just add these properties .screenshot selector:

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

Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -