Currently, there is an image that is centered on the screen using flexbox:
.center-flex {
display: flex;
justify-content: center;
}
<div class="center-flex">
<img id="revealImage">
</div>
An attempt is being made to dynamically create a div that should be positioned at the upper-left hand corner. Despite trying to obtain the computed left property of the image element, it returns as auto due to the flex layout.
const revealImage = document.getElementById('revealImage');
const left = window.getComputedStyle(revealImage,null).getPropertyValue('left');
let square = document.createElement('div');
square.style.height = '100px';
square.style.width = '100px';
square.style.zIndex = '2';
square.style.position = 'absolute';
square.style.backgroundColor = 'red';
square.style.top = 0;
square.style.left = left;
console.log('left: ' + left);
As a result, a red box is displayed properly overlaid but it still remains centered instead of being set to the left.