web-dev-qa-db-fra.com

Position CSS: fixée dans un élément positionné

J'ai un div positionné dont le contenu peut être trop long, donc des barres de défilement apparaissent (overflow:auto ensemble). Il fonctionne comme une boîte de dialogue dans une application ajax. Je veux fixer un bouton de fermeture sur son coin en haut à droite afin que lorsque l'utilisateur fait défiler la div il ne défile pas.

Je l'ai essayé avec position:fixed; right:0; top:0 mais il a placé le bouton en haut à droite de la page, pas dans le div (dans Firefox).

Est-il possible de faire ce placement de bouton en utilisant uniquement CSS sans piratage avec offsetWidth/Height en js sur chaque événement de défilement?

ps: la hauteur et la largeur de la div ne sont pas des valeurs fixes, elles dépendent de la taille du contenu et de la taille de la fenêtre du navigateur. L'utilisateur peut également le redimensionner s'il le souhaite.

htmlcssstylesheetpositioning
68
Calmarius

Vous pouvez utiliser le position:fixed;, mais sans set left et top. Ensuite, vous le pousserez à droite en utilisant margin-left, pour le placer dans la bonne position que vous souhaitez.

Vérifiez une démo ici: http://jsbin.com/icili5

83
Sotiris

La solution actuellement choisie semble avoir mal compris le problème.

L'astuce consiste à ne pas utiliser de positionnement absolu ni fixe. A la place, placez le bouton de fermeture en dehors de la div avec son position définie sur relative et un flottant de gauche afin qu'il soit immédiatement à droite de la div. Ensuite, définissez une marge gauche négative et un indice z positif pour qu’elle apparaisse au-dessus du div.

Voici un exemple:

#close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>
14
Joseph

Position:fixed donne une position absolue concernant la fenêtre BROWSER. alors bien sûr, ça va là-bas.

Tandis que position:absolute fait référence à l’élément parent, donc si vous placez votre <div> bouton à l'intérieur du <div> du conteneur, il devrait se placer là où vous le vouliez. Quelque chose comme

EDIT: grâce à @Sotiris, qui a un point, la solution peut être obtenue en utilisant une position: fixed et une marge gauche. Comme ceci: http://jsfiddle.net/NeK4k/

5
Damien Pirsy

Je sais que ceci est un ancien post mais j'avais la même question mais je n'ai pas trouvé de réponse qui fixe l'élément par rapport à un parent div. La barre de défilement de medium.com est une excellente solution CSS pure pour définir quelque chose position: fixed; Par rapport à un élément parent au lieu de la fenêtre de visualisation (un peu *). Pour ce faire, définissez le parent div sur position: relative; Et utilisez un wrapper de bouton avec position: absolute;. Le bouton est bien entendu position: fixed; Comme suit:

<div class="wrapper">
  <div class="content">
    Your long content here
  </div>

  <div class="button-wrapper">
    <button class="button">This is your button</button>
  </div>
</div>

<style>
  .wrapper {
    position: relative;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .button {
    position: fixed;
    top: 0;
    width: 50px;
  }
</style>

exemple de travail

* Puisque les éléments fixes ne défilent pas avec la page, la position verticale sera toujours relative à la fenêtre d'affichage, mais la position horizontale sera relative au parent avec cette solution.

4
Lifehack

Semble, les transformations CSS peuvent être utilisées

"La propriété 'transform' établit un nouveau système de coordonnées local au niveau de l'élément",

mais ... ce n'est pas multi-navigateur, ne semble que Opera fonctionne correctement

2
4esn0k

Essayez la position : collante sur le div parent de l'élément que vous souhaitez corriger.

Plus d'infos ici: http://html5-demos.appspot.com/static/css/sticky.html . Attention : vérifiez la compatibilité de la version du navigateur.

1
Lohit Bisen

J'ai réussi à avoir un élément avec une position fixe (wiewport) mais par rapport à la largeur de son parent.

Je devais juste envelopper mon élément fixe et donner au parent une largeur de 100%. En même temps, l’élément fixe encapsulé et le parent se trouvent dans un div dont la largeur change en fonction de la page, contenant le contenu du site Web. Avec cette approche, je peux avoir l'élément fixe toujours à la même distance du contenu, en fonction de la largeur de celui-ci. Dans mon cas, c’était un bouton 'to top', toujours à 15 pixels du bas et 15 pixels du contenu.

https://codepen.io/rafaqf/pen/MNqWKB

<div class="body">
  <div class="content">
    <p>Some content...</p>
    <div class="top-wrapper">
      <a class="top">Top</a>
    </div>
  </div>
</div>

.content {
  width: 600px; /*change this width to play with the top element*/
  background-color: wheat;
  height: 9999px;
  margin: auto;
  padding: 20px;
}
.top-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 9;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: yellowgreen;
    position: fixed;
    bottom: 20px;
    margin-left: 100px;
    cursor: pointer;
    &:hover {
      opacity: .6;
    }
  }
}
1
agapitocandemor

Si votre bouton de fermeture doit être du texte, cela fonctionne très bien pour moi:

#close {
  position: fixed;
  width: 70%; /* the width of the parent */
  text-align: right;
}
#close span {
  cursor: pointer;
}

Alors votre HTML peut simplement être:

<div id="close"><span id="x">X</span></div>
0
thatmiddleway