Discussion :

[momjunior]

Bonjour

J'ai une div qui contient un span dont la position est "fixed". J'aimerai donc savoir si c'est possible d'avoir la position "fixed" seulement au sein de la div, c'est-à-dire que lorsque je défile en bas, le span sort carrèment de la div:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<style> 
.div-droite span{  
margin-left: 85px;
position: fixed;
}
</style>
<div class="div-droite">                                  
                 <span>1/100 </span>
       </div>

Merci

[psychadelic]

https://developer.mozilla.org/fr/docs/Web/CSS/position

Les propriétés top, right, bottom et left déterminent l'emplacement final de l'élément positionné.

[momjunior]

Ok j'ai essayé le code qui se trouve dans le tuto que tu m'as montré mais il y a toujours le même problème, quand je défile en dehors de l'élément conteneur, le div "fixed" reste figé par rapport à la page entière, et non par rapport au conteneur:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Learn about this code on MDN: https://developer.mozilla.org/fr/docs/Web/CSS/position -->
 
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="un">Un</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#un {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

[momjunior]

Ok c'est bon ça marche, je devais utiliser absolute au lieu de fixed, et rajouter top:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.div-droite span{  
margin-left: 85px;
position: absolute;
top: 480px;
}

Merci

[NoSmoking]

Bonjour,

je devais utiliser absolute au lieu de fixed...

un élément en position:fixed est TOUJOURS positionné par rapport au viewport

• 6.4. Fixed positioning

Cela doit sûrement être mentionné quelque part dans le lien fournit.