Posición contenido fijo problema del solapamiento

Ésta es mi HTML5 marcadoPosición contenido fijo problema del solapamiento

<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div>

Ahora usa CSS

header{ height: 95px;position: fixed;width: 100%;min-width: 980px;} 
footer{background:#000000;bottom:0;height:30px;position:fixed;width:100%;min-width: 980px}

Ahora mi problema es cuando pongo cualquier contenido en el interior

<div id="content"> 
</div>

El contenido viene desde arriba: 0 que no es obligatorio. No quiero usar relleno o margen sobre el contenido. ¿Hay alguna manera de que el contenido aparezca debajo del encabezado?

Fuente

2011-03-15 Soarabh

¿Qué es una etiqueta '' ? ¿De dónde has obtenido esa idea? – thirtydot

use la etiqueta de escritura "

" en lugar de "" – sandeep

La razón principal es porque <header> es position:fixed sacándolo del flujo de documentos. Tendrá que agregar margin o padding al elemento <body> o <content> (??). Además, si utiliza elementos HTML5, agregue esto al principio de sus reglas CSS para compatibilidad con navegadores más antiguos.

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
}

Tomado de Eric Meyer's CSS Reset.

Fuente

2011-03-15 12:43:48 Marcel

usted no menciona ningún otro requisito de diseño que pueda tener, pero esto sería un buen comienzo

content {position: relative; top: 95px}

actualización

Como otro estado de la gente buena, <content> no es válido Etiqueta HTML5 Tal vez no tiene que ver con la pregunta específica, pero sigue sus consejos y evita rodar tus propias etiquetas. Use uno estándar en su lugar.

Fuente

2011-03-15 12:47:39 Jon

No creo que deba animar al OP a escribir sus propias etiquetas personalizadas. – Starx

@Starx: No estoy alentando nada. Usted y todos los demás tienen razón al decir "no use' '", pero eso aún no resolvería el problema del OP. – Jon

IMO el camino para comenzar a resolver su problema, comienza cuando elimina su etiqueta '' – Starx

Supongo que en realidad no quiere decir <content>, ya que no es una etiqueta HTML5 válida. De todos modos, el problema que está viendo se debe a la directiva position: fixed para su elemento <header>. Intenta eliminar eso e ir desde allí.

Fuente

2011-03-15 12:50:29 Ben

Sigue esas etiquetas HTML5, que están presentes. Si va a crear uno propio, entonces eso podría tener consecuencias.

Aquí sigue esto.

<header> 
</header> 
<section> 
</section> 
<footer> 
</footer>

Para aprender sobre las etiquetas HTML5 válidos por favor siga este link.

Fuente

2011-03-15 13:05:29 Starx

Si otras soluciones no funcionan, verifique que el fondo/color de fondo no sea transparente y configúrelo en blanco.

Fuente

2016-12-05 16:46:15 ElaGorilaki

Así, por lo que recibo de esta pregunta, que están tratando de no superponer las cosas, se puede utilizar z-index dentro de su div 's css:

.ejemplo {

position: absolute; 

    z-index: -10;

}

z-index sólo funciona en elementos posicionados (posición: absoluta, la posición: relativa, o posición: fijo)

Fuente

2017-11-14 22:50:41

Posición contenido fijo problema del solapamiento

Respuesta

Cuestiones relacionadas