Overlay element at top-left corner of centered image-CodePudding

I have an image which is currently centered on the screen using flexbox:

.center-flex {
    display: flex;
    justify-content: center;
}

<div >
    <img id="revealImage">
</div>

I am attempting to dynamically create a div that needs to be placed at the upper-left hand corner. I have tried the following to get the computed left on the image but it does not work as it returns 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);

This results in a properly overlayed red box but it is centered and not set left.

CodePudding user response：

I would suggest a different approach in the html, by using the picture element in order to wrap the red square.

For example,

html:

<div >
    <picture>
        <img id="revealImage">
    </picture>
</div>

css:

picture {
    position: relative;
}

js:

const picture = document.querySelector('picture');

const 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;
picture.appendChild(square)

https://jsfiddle.net/kongallis/ju16rdfL/9/

CodePudding user response：

I think you made a small mistake(if I do not mistake):

Seem this is mistake:

square.style.left = left;

do:

square.style.left = 0;

is it right?