Tengo un encabezado, un cuerpo principal y un pie de página. El encabezado y el cuerpo principal están bien diseñados. Ahora para el pie de página que quiero que parezca detrás de cuerpo principal, así que utilicé:CSS con problema de posicionamiento relativo negativo
z-index: -1;
position: relative;
top: -60px;
Esto da el resultado deseado, pero me da un espacio adicional de 60 píxeles en la parte inferior.
¿Cómo elimino este espacio adicional?
Paul es correcto. margin-top: -60px; en lugar de top: -60px;. Otra posible solución sería establecer el "cuerpo principal" en position: relative; y luego usar position: absolute; bottom: 60px; en el pie de página, aunque esto significa que el pie de página debe moverse dentro del "cuerpo principal". aunque siempre que el padre del pie de página fluya con "mainbody", podría usar el mismo truco en ese elemento.
Gracias prodigitalson. Intenté ambas soluciones que brindó. Para margin-top: - 60px no hace ningún cambio y permanece allí. Sin embargo, en DW muestra el efecto. También usa position: absolute hace que div # footer se comporte de manera diferente. Creo que hay algo en el mainbody que está causando el error. Gracias a todos por consejos de ayuda rápida y sugerencias. En verdad lo aprecio. – noobcode
margin-top funcionó para mí. Gracias – mark
Tengo el mismo problema: si coloreas un color detrás del texto, verás que el navegador está 'renderizando' el texto en la posición normal y luego moviéndolo hacia arriba, por lo que está creando un espacio. Necesito una sombra en mi rollover para que esto no funcione. – niico
Una forma de lograr eso sería colocar el div dentro de otro, absolute 'div posicionado para que se saque del flujo de documentos.
Tampoco estoy seguro de qué logras con 'z-index', estoy bastante seguro, nada cambiaría si desactivas esa regla. IIRC, el 'z-index 'negativo oculta el contenido al imprimir, y eso es todo. – raveren
En realidad con Z-index = -1, quiero que el pie de página aparezca a la mitad detrás del cuerpo. Por lo tanto, parece que mi pie de página comienza desde algún lugar detrás del cuerpo y continúa hasta el final de la página. – noobcode
I * think * z-index solo funciona con valores positivos excepto en la caja de impresión. De todos modos, ¿has probado la solución 'absoluta'? – raveren
El espacio "extra" en la parte inferior es el espacio que ocuparía el pie de página. Los elementos relativamente posicionados ocupan el mismo espacio en el flujo de diseño de la página, aunque aparezcan en otro lugar.
Puede probar con un margen inferior negativo en su cuerpo principal. Puede encontrar esto significa que no necesita top: -60px; en su pie de página.
Lo intenté, pero bajó el cuerpo principal. El espacio extra debido al pie de página aún existe. Gracias por su respuesta. – noobcode
Hmmm. ¿Qué tal si reemplazamos 'top: -60px' en el pie de página con' margin-top: -60px'? Eso debería afectar el flujo de documentos y el posicionamiento del pie de página. (Supongo que su pie de página tiene 60 píxeles de alto). –
No es realmente una respuesta directa a su pregunta, pero dependiendo de lo que desea mostrar detrás del contenido principal, puede simplemente falsificarlo.
Si se trata de una imagen, puede simplemente ponerla en html {} o body {} (o un div que encapsula todo el contenido) y alinearla en la parte inferior.
Gracias jeroen por su respuesta .. – noobcode
Puede seguir utilizando:
position: relative;
top: -60px;
para la sección que necesita, pero establecer
margin-top: -60px;
a la sección que aparece a continuación. En este caso, pie de página.
otra solución para esto es:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
superior crea margen extra y margin-bottom lo elimina
por alguna razón de h etiqueta solo esto funcionó para mí. margen negativo superior no funciona
¿En qué navegadores? ¿Y tienes una página de demostración configurada? – jeroen
Estoy usando Firefox ahora mismo para la codificación. Lo tengo en localhost. – noobcode
Gracias Paul por editar mi publicación y hacer que se vea más limpia. La próxima vez intentaré ser más claro. Gracias – noobcode