0
126
Viewsstyle.top inconsistente entre JS, CSS en línea y getBoundingClientRect
¿Alguien puede arrojar un poco de luz sobre lo que está sucediendo aquí?
Mirando la consola veo tres números aparentemente incompatibles: en el mismo elemento temp0 (el resaltado en la consola, ubicación señalada por la flecha, es un asterisco), si style.top obtengo un valor, inspeccionando el CSS en línea una segunda, ya través de getBoundingClientRect.top una tercera. ¿Qué me estoy perdiendo, o cuál podría ser la causa de algo como esto?
La estructura del html de arriba a abajo es: un par de barras de navegación, un div que ocupa el 30% de la viewport height gráfica, un segundo div que usa el ~70% restante, organizado en tres columnas a través de bootstrap 4.5 (tamaño 1- 10-1).
El trasfondo es: perdí la cuenta de cuántas preguntas y artículos he estado leyendo tratando de resolver lo que parece un error de alineación tonto que sigue apareciendo en mi código.
Esta noche pensé que había encontrado algo definitivo en esta función y artículo detallado, otras dos horas desaparecieron en vano. Cuando vi los resultados de estos tres comandos en la consola, me di cuenta de que necesitaba ayuda: PI realmente agradecería cualquier pista sobre lo que me estoy perdiendo.
2 answers
Answer question0
No estoy seguro de qué más está pasando en su página, pero parece que intentó configurar el elemento style.top en 320.75px y, aunque la consola lo imprime, no parece que el estilo en línea fuera realmente afectado.
style.top es el equivalente del estilo en línea (y no algo definido en CSS). Vea el ejemplo a continuación. style.top puede no representar con precisión dónde se encuentra realmente un elemento en la pantalla. El primer elemento interno tiene la position: static , por lo que aunque tiene un conjunto top tanto en línea como CSS, ninguno afecta al elemento, pero style.top todavía muestra 100px .
getBoundingClientRect() siempre es relativo a la ventana . El primer elemento interno es en realidad 8px desde la parte superior de la página, que muestra rect.top . El segundo elemento interno tiene una position: absolute , por lo que se ve afectado por style.top y en realidad está a 250 px de la parte superior de la página.
console.log('inner1 rect.top: ' +inner1.getBoundingClientRect().top); console.log('inner1 style.top: ' +inner1.style.top); console.log('inner2 rect.top: ' +inner2.getBoundingClientRect().top); console.log('inner2 style.top: ' +inner2.style.top); #outer { background: red; display: block; height: 400px; width: 400px; } #inner1 { background: yellow; display: block; height: 100px; top: 5px; width: 100px; } #inner2 { background: blue; display: block; height: 100px; top: 5px; width: 100px; } <div id="outer"> <div id="inner1" style="top:100px;"></div> <div id="inner2" style="position:absolute; top:250px;"></div> </div>0
Así que la solución fue (ehm) simple:
Ahora, ¿cómo funciona la posición absoluta? El elemento se elimina del flujo de documentos normal y no se crea ningún espacio para el elemento en el diseño de página. Está posicionado en relación con su ancestro posicionado más cercano , si lo hay; de lo contrario, se coloca en relación con el bloque contenedor inicial. Su posición final está determinada por los valores de arriba, derecha, abajo e izquierda. (de Mozilla WDN)
(negrita y cursiva mía)
Por lo que tengo entendido: porque el contenedor tenía una position: absolute; el niño se colocó en relación con el contenedor en lugar del documento en sí. Así que no importaba lo mucho que lo intentara, la información top de los dos elementos nunca estuvo sincronizada, ni la configuración de style.top basada en esa información podría funcionar.
A veces me siento desesperanzado frente a las sutilezas de CSS, pero tal vez lo hice bien.
Gracias @skyline3000 y @Kaiido por sus pistas.