margin afecta la posición de otros elementos fijos

Question

Mar 08, 2012, 10:20 PM

margin afecta la posición de otros elementos fijos

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

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, tal vez es Opera quien lo tiene mal. Lo que estoy hablando se puede ver eneste JSFIDDLE (¡no uses 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>