Encountering an issue with Angular File upload in conjunction with relatively positioned elements. The drop target is set to 100% width and height, absolutely positioned. While dragging a file over any non-relatively positioned element, the overlay functions as expected. However, when dragged over a relatively positioned element, the drag event is not registered due to these elements appearing on top of the dropArea.
Attempting to resolve this by applying a z-index to the drop target yields successful drag and drop functionality; however, it results in the inability to click anything on the user interface.
Outlined below is my approach:
HTML
<html>
<head>...</head>
<body>
<div id="dropArea">...</div>
<div id="siteContent">
<div class="row">
<!-- Dragging onto this relatively positioned element fails -->
<div class="col-md-12">...</div>
<div>...</div>
</div>
</div>
</body>
</html>
CSS
#dropArea {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
Is there a way to assign a z-index to the dropArea while still permitting clicks to pass through?