居中圖像左上角的疊加元素

Question

我有一個使用 flexbox 當前位於屏幕中心的圖像：

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

<div class="center-flex">
    <img id="revealImage">
</div>

我正在嘗試動態創建一個需要放置在左上角的div 。 我嘗試了以下方法將計算機left在圖像上，但它無法正常工作，因為它返回auto 。

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);

這會產生一個正確覆蓋的紅色框，但它居中而不是設置在左側。

Answer 1

我會在 html 中建議一種不同的方法，通過使用picture<\/code>元素來包裹紅色方塊。

例如，

html<\/code> ：

<div class="center-flex">
    <picture>
        <img id="revealImage">
    </picture>
</div>

Answer 2

我認為你犯了一個小錯誤（如果我沒有弄錯的話）：

似乎這是錯誤的：

square.style.left = left;

做：

square.style.left = 0;

這樣對嗎？