margen afecta a otros elementos fijos posición

Quería establecer un encabezado superior en una posición fija y tener contenido desplazarse por debajo de él y se encontró con algo extraño. Si establezco un margen superior en el div de contenido, ese margen también afectaría al encabezado y lo movería hacia abajo aunque esté establecido en posición: fijo. Encontré una solución al configurar el div de contenido en posición: relativo y usando top: para compensarlo con la misma cantidad, pero me resulta extraño que un div no anidado pueda afectar un elemento de posición fija y me gustaría saber por qué sucede .margen afecta a otros elementos fijos posición

Me sale lo mismo en Safari, Firefox y Chrome. En Opera, el margen empuja hacia abajo el contenido y deja el encabezado en su lugar, que es lo que esperaba que hiciera, pero en comparación con los otros resultados, es posible que sea Opera quien lo tenga mal. De lo que estoy hablando se puede ver en this JSFIDDLE (¡no use Opera! :)).

Aquí está el código:

css:

body { 
    background:#FFD; 
} 

#header { 
    position:fixed; 
    height:15px; 
    width:100%; 
    text-align:center; 
    border-bottom:1mm dashed #7F7F7F; 
    background-color:#EEE; 
} 

#content { 
    width:90%; 
    margin-top:25px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#E5E5FF; 
    border: 1px solid #000; 
}

html:

<body> 
    <div id="header"> 
     HEADER 
    </div> 
    <div id="content"> 
     <p>Text1</p> 
     <p>Text2</p> 
     <p>Text3</p> 
     <p>Text4</p> 
    </div> 
</body>

Fuente

2012-03-08 seron

#header { 
    top: 0px !important; 
}

Fuente

2012-03-08 21:22:38 Seabass

'! Important' no es necesario. –

Bien, usted está bien agarrado. – Seabass

Qué vergonzoso haberte perdido eso. ¡Gracias! Aún así, es extraño que se aplique el mismo margen a un elemento no descendiente, ¿no crees? – seron

#content es de posición fija, pero las coordenadas que establece para top, right, bottom y left son re lativo a su contenedor principal: #header. En otras palabras, #content siempre se va a fijar en la parte superior de #header. Dado que está superando #header hacia abajo con margin, seguirá el #content.

Usted sea necesario para compensar el margen

#content { position: fixed; top:-25px; }

Dicho esto, supongamos que desea fijar algo a la parte superior de la pantalla y no creo que esto va a conseguir lo que quiere. Necesitará romper #content de #header o bien hacer #header estáticamente posicionado: position:static para que el contenido se fije en la parte superior de la ventana, no en el encabezado.

Fuente

2012-03-08 21:31:04 Jeff

-1

Creo que está sintiendo los efectos del "colapso del margen", que está causando que su entrada "margen superior" en "contenido" colapse en el elemento del cuerpo de la página. Una solución fácil es simplemente crear un div que contenga "contenido" y "encabezado" y establecer el CSS en "desbordamiento: oculto". Luego, asegúrese de establecer los márgenes y el relleno del elemento "cuerpo" en 0.

Fuente

2012-03-08 23:09:25 Zensar

Por lo que he leído de colapso de margen los márgenes no aparecen y no al revés. De todos modos, "top: 0px" lo hizo, como señaló Zenbait. – seron

@seron Creo que lo que leyó sobre el colapso del margen es incorrecto. El colapso de margen utiliza el mayor de los dos valores para establecer el margen, todo lo contrario de hacer que los márgenes no aparezcan. Ver [este hilo] (http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers) para una explicación más detallada sobre cómo esto causa el problema. descrito. – Adam

O configure el relleno superior (en lugar del margen superior) para #content a la altura de #header.

Hemos calculado las formas de posicionar correctamente el encabezado, pero sigo sintiendo mucha curiosidad sobre por qué el desplazamiento ocurrió en primer lugar.

Fuente

2012-05-23 23:33:41 user1413795

margen afecta a otros elementos fijos posición

Respuesta

Cuestiones relacionadas