0
99
ViewsOverlay element at top-left corner of centered image
I have an image which is currently centered on the screen using flexbox:
.center-flex {
display: flex;
justify-content: center;
}
<div class="center-flex">
<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.
·
Juan Pablo Isaza
2 answers
Answer question0
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 class="center-flex">
<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)
·
Juan Pablo Isaza
Report
0
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?
·
Juan Pablo Isaza
Report
Answer question