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
Post a Comment