web-dev-qa-db-fra.com

Pourquoi ma marge ne fonctionne-t-elle pas avec la position: fixe?

Démo JSFiddle

J'ai un div pour un en-tête et un div pour un habillage de contenu.

Pour une raison quelconque, je ne peux pas avoir de marge au bas de l'en-tête qui force l'enroulement de contenu à pousser vers le bas. Il l'ignore complètement et je ne sais pas pourquoi.

Est-ce que quelqu'un sait ce qui se passe avec ça? Il ne fait pas cela quand je retire la position: fixe; attribut sur l'en-tête, mais je veux qu'il soit fixé en haut donc lorsque vous faites défiler l'en-tête est toujours en vue.

En espérant que quelqu'un puisse expliquer pourquoi cela se produit ou au moins comment cela s'appelle, afin que je puisse le rechercher sur Google.

body {
    margin: 0;
    padding: 0;
        font-family: arial;
        background: #5A9910;
        text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
        width: 100%;
        margin: 0 auto;
        text-align: left;
}

/* ==========================Header with logo==*/
div.header {
        position: fixed;
        width: 100%;
        background: #ffffff;
        -webkit-box-shadow: 0 8px 6px -6px #333;
        -moz-box-shadow: 0 8px 6px -6px #333;
        box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
        width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
        width: 80%;
        height: 1600px;
        background: #ccc;
        margin: 0 auto;
}
<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>
htmlcsscss-position
12
dan

je pense que vous devez déclarer explicitement la position de div fixe.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

et attribuer une marge à la div de contenu

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

vérifier ce violon si fonctionne comme vous en avez besoin: https://jsfiddle.net/0cmvg92m/3/

8
cesare

Lorsque vous définissez un élément sur position: fixed;, vous le supprimez du "flux de documents normal". Imaginez que votre site Web est une rivière et que vous le regardez d'en haut. Chaque élément est un rocher dans cette rivière. Tout margin que vous avez appliqué à vos éléments est comme un champ de force autour de l'une de ces roches.

Lorsque vous définissez position: fixed; sur l'un de ces rochers, vous le tirez essentiellement hors de la rivière de sorte que le rocher, essentiellement, flotte au-dessus de la rivière en plein air. Le rocher et le débit d'eau de la rivière vous sembleront toujours les mêmes, car vous êtes au-dessus, regardant droit vers le bas, mais le rocher n'interagit plus avec le débit de la rivière.

Si vous aviez appliqué margin à cette roche, ce champ de force autour de la roche ne retient plus l'eau, car la roche plane dans les airs grâce à son position: fixed; propriété. Il n'y a donc pas d'eau ou d'autres roches (autres éléments) dont il a besoin pour se distancier. Le champ de force de votre roche (la marge de votre élément) pousse contre l'air mince, donc rien dans la rivière ne sera affecté.

Mais une image vaut mille mots, comme le dit le dicton:

Kicking the Tower of Pisa

Cet homme ne donne pas vraiment un coup de pied au-dessus de la tour penchée de Pise, mais ça y ressemble vraiment! Dans cet exemple, l'arrière-plan de l'image, y compris la tour penchée de Pise, est votre page (ou votre "flux de documents normal"), et l'homme est un élément (ou la roche de notre dernier exemple) avec position: fixed; appliqué.

En savoir plus sur la propriété position ici et, plus à jour, ici .

Pour résoudre ce problème, vous pouvez définir votre en-tête sur top: 20px; z-index: 2; pour vous assurer qu'il est positionné en haut et au-dessus de tous les autres éléments du plan z, puis donnez à votre corps position: relative; et un margin-top égal à la hauteur de l'en-tête (dans ce cas, 52px) plus la valeur de la propriété top de l'en-tête. Pour augmenter l'espace entre votre en-tête et votre corps, augmentez simplement le margin-top montant. Ceci est parfois appelé l'approche "en-tête/pied de page collant". Voici une démo:

body {
    margin: 0;
    padding: 0;
    font-family: arial;
    background: #5A9910;
    text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* ==========================Header with logo==*/
div.header {
    position: fixed;
    top: 20px;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 8px 6px -6px #333;
    -moz-box-shadow: 0 8px 6px -6px #333;
    box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
    width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
    width: 80%;
    height: 1600px;
    background: #ccc;
    margin: 0 auto;
    position: relative;
    margin-top: 72px;
}
<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>

P.S. position: fixed; est une propriété CSS (une paire propriété-valeur, pour être précis), pas un attribut HTML.

58
TylerH

La marge ne fonctionne pas car la position de l'en-tête est fixe.

Vous devez utiliser padding-top sur votre contentwrap.

0
max

Votre en-tête a une propriété position:fixed. Par conséquent, la marge que vous appliquez à l'en-tête n'a pas d'impact sur la section de contenu.

Pour résoudre ce problème, vous devez donner une marge ou un remplissage à l'élément contentwrap

0
sunitj