0
103
VistasElemento superpuesto en la esquina superior izquierda de la imagen centrada
Tengo una imagen que actualmente está centrada en la pantalla usando flexbox:
.center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> Estoy intentando crear dinámicamente un div que debe colocarse en la esquina superior izquierda. Intenté lo siguiente para obtener la left calculada en la imagen, pero no funciona, ya que regresa auto debido al diseño flexible.
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);Esto da como resultado un cuadro rojo superpuesto correctamente, pero está centrado y no colocado a la izquierda.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Sugeriría un enfoque diferente en el html, utilizando el elemento de picture para envolver el cuadrado rojo.
Por ejemplo,
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
Denunciar
0
Creo que cometiste un pequeño error (si no me equivoco):
Parece que esto es un error:
square.style.left = left;hacer:
square.style.left = 0;¿Es correcto?
·
Juan Pablo Isaza
Denunciar
Responde la pregunta