float - position bottom css

css "fijo" las posiciones del elemento hijo relativas al elemento principal, no a la ventana gráfica, ¿por qué?

Question

Estoy desarrollando un tema de WordPress, con una cuadrícula de isótopos y donde un elemento emergente en una publicación debe mostrar su título con una posición fija en la parte inferior del navegador. Tengo esta estructura simplificada:

<div id="main">
<article class="hubbub">
//article content
<h2 class="subtitled">
//h2 content
</h2>
</article>
</div>

A través de jQuery, un elemento h2.subtitled en <article> debería mostrar su elemento hijo h2.subtitled . <article> se posiciona de forma relativa, pero obtiene una posición absoluta mediante el script de isótopos. El h2.subtitled se coloca fijo con:

.subtitled {
display: none;
position: fixed;
z-index: 999999999;
bottom: 20px;
left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 42px;
text-align: center;
color: yellow;
}

Por algún motivo, los elementos h2.subtitle se posicionan de forma fija en relación con el elemento primario <article> , por lo que al final de cada <article> . Si configuro <h2> fuera del <article> , se coloca fijo relacionado con el navegador, pero deben estar dentro del elemento <article> , porque un desplazamiento infinito agrega los nuevos elementos <article> y deberían también contienen los títulos <h2> .

¿Alguien sabe cómo hacer esta posición fija y relacionada con la ventana del navegador?

¡Gracias!

Answer 1

Elimine la propiedad de transform del elemento primario del elemento fijo.

Por alguna razón, esto hace que el elemento fijo se vuelva relativo al padre en lugar del documento.

Ejemplo de Codepen.

Answer 2

FWIW, cuando me encontré con esto, el problema resultó ser un div principal con -webkit-transform: translate3d(0, 0, 0) en su CSS. Aparentemente, esta es una fuente conocida de caos potencial en los elementos secundarios con position: fixed .

Por lo que estaba intentando hacer (activar y desactivar fixed como una forma de insertar un elemento de navegación clave en la parte superior de la página a medida que se desplazaba), la solución fue append al elemento del body la página cuando era hora de sosténgalo en su lugar y colóquelo en su div envoltorio cuando no lo estaba. No tengo idea si algo de esto hubiera ayudado al OP, pero si estás persiguiendo este error, vale la pena investigarlo.