user2377796 user2377796 - 3 months ago 19
CSS Question

Make elements below absolute positioned div clickable

I am working on a project where I need to upload screenshots that are copy pasted
into the browser. The system works but i have a problem to click the images to show them in fullscreen.

I made a JSFiddle of what it looks like: https://jsfiddle.net/n7fc1jp7/1/#&togetherjs=SMNbbNvkan

<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 be used as parent because it will be cleared when inserting a new image.

Hope someone got an idea.
Thanks

Answer

Just add these properties to the .screenshot selector:

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