Selon cette déclaration :
Lorsque la position est définie sur absolue ou fixe, la propriété left spécifie la distance entre le bord gauche de l'élément et le bord gauche de son bloc conteneur. (Le bloc conteneur est l'ancêtre sur lequel l'élément est relativement positionné.)
J'ai mis un élément fixe dans un élément relatif, et j'ai défini sa propriété 'left' sur une valeur. Cette valeur doit être relative à son div parent. Mais cela ne fonctionne pas comme prévu. voir mon codepen: https://codepen.io/iamnotstone/pen/PgdPrJ?&editable= true
Le texte doit être dans la case rouge.
<div class='test'> <h1>Fixed positioning</h1> </div>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test {
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
4 Réponses :
D'après le doc: Positionnement fixe code>
Le positionnement fixe est similaire au positionnement absolu. La seule différence est que pour une boîte positionnée fixe, le bloc contenant est établi par la fenêtre.
Au lieu de left , vous pouvez utiliser la propriété margin-left :
<div class='test'> <h1>Fixed positioning</h1> </div>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
margin-left: 0px
}
Pouvez-vous expliquer pourquoi je ne peux pas mettre une gauche dans une gauche?
@ 欧阳 维杰, left ne s'applique qu'aux éléments définis avec un positionnement absolu ou relatif ... :)
Donc, cette déclaration dans Mozilla est quelque peu dénuée de sens?
@Mamun, je pense que vous généralisez un peu trop avec votre déclaration. La propriété de gauche s'applique aux éléments utilisant position: fixed . MDN et un simple démo
@NicoO, c'est étrange, ce que dit le document, je n'ai pas pu le faire fonctionner !!!
Vous semblez avoir raison sur une erreur dans la documentation (voir la discussion ci-dessus). Je pense que w3c.org fournit la meilleure description: < code> Le positionnement fixe est similaire au positionnement absolu. La seule différence est que pour une boîte positionnée fixe, le bloc contenant est établi par la fenêtre.
Salut les amis! Lorsque j'ai ajouté une propriété de transformation dans son parent. tout fonctionne comme prévu! @Nico
Cela fonctionne parce que: Dans les éléments positionnés absolus ou fixes , si vous omettez les propriétés positionnelles ( gauche et droite pour x -axis et top et bottom pour l'axe y), ces éléments prennent cette position, qu'ils auraient avec un positionnement statique
C'est très étrange. Lorsque je définis une propriété de transformation dans son parent, tout fonctionne comme prévu!
<div class='test'> <h1>Fixed positioning</h1> </div>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px;
transform: translate(0) /* added this, and works as expected */
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
enfin, j'ai trouvé la réponse.
Il y a aussi une déclaration ici :
Si la propriété de position est fixe, le bloc conteneur est établi par la fenêtre (dans le cas d'un média continu) ou la zone de page (en le cas des médias paginés).
Si la propriété de position est absolue ou fixe, le bloc contenant peut également être formé par le bord du zone de remplissage de l'élément ancêtre le plus proche qui a ce qui suit:
Une valeur de transformation ou de perspective différente de aucune
Une valeur va changer de transformation ou de perspective
Une valeur de filtre autre que none ou une valeur de filtre va changer (ne fonctionne que sur Firefox).
Une valeur contenant de la peinture (par exemple, contient: peinture;)
Il s'agit d'un bogue dans Chrome: stackoverflow.com/questions/2637058/...
Oui, exactement ! Il est donc préférable d'éviter la propriété de transformation sur l'élément parent @ yunzen
@yunzen ce n'est pas un bug, c'est par conception: stackoverflow.com/a/15256339/8620333
J'ai trouvé ceci: Si la propriété de position est absolue ou fixe, le bloc contenant peut également être formé par le bord de la boîte de remplissage de l'élément ancêtre le plus proche qui a ce qui suit: Une valeur de transformation ou de perspective différente de aucune Une valeur va changer de transformation ou de perspective Une valeur de filtre autre que aucune ou une valeur de filtre va changer (ne fonctionne que sur Firefox). Une valeur contenant de la peinture (par exemple, contient: peinture;)
Si vous utilisez position: fixed; vous définissez la position d'un élément dans la fenêtre. Si vous utilisez position: absolute; alors vous définissez la position d'un élément dans la boîte de son parent. Le CSS donne également la priorité au code plus bas, donc par exemple dans votre code, h1 est l'élément le plus prioritaire (ne s'applique pas aux classes et aux ID, les classes ont priorité sur les éléments et les ID ont priorité sur les classes).
Vous devez utiliser position: fixed pour le corps du document et utiliser position: absolute pour les éléments avec le parent qui a position: relative code >, alors changez la position de h1 en absolue: body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px;
transform: translate(0) /* added this, and works as expected */
}
h1 {
position: absolute; //
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
position: fixedest fixé à la fenêtre. Si vous omettez la propriété gauche ou supérieure, elle adhérera à son parent, sinon non.Mais comment expliquer cette déclaration à Mozilla? @StackSlave
Ils sont incorrects, en ce qui concerne
position: fixed. Au fait, consultez votre lien. J'ai trouvé la page, mais j'ai dû rire.Oh! merci d'avoir mentionné ce lien @StackSlave
J'ai trouvé quelque chose de très intéressant! Si je définis une propriété de transformation dans son parent. tout fonctionne comme prévu! @StackSlave