CSS position:fixed positionné à l'intérieur d'un élément

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

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

Est-il possible de ce faire, l'emplacement des boutons à l'aide de CSS sans le piratage avec le offsetWidth/Hauteur en js sur chaque événement scroll?

ps: le div de la hauteur et la largeur n'est pas une valeur fixe, il dépend de la taille et de la fenêtre du navigateur de la taille. L'utilisateur peut également redimensionner si il veulent.

  • Il pourrait être utile d'envisager d'utiliser un div avec une position fixe de l'image de fond pour le bouton.
  • semble être une bonne idée, mais comment voulez-vous cliquez sur le bouton alors?
  • Aussi longtemps que la hauteur et la largeur de la div sont définies pour correspondre à celle de l'image d'arrière-plan, il doit être cliquable. Pour la gestion de la cliquez sur, cela dépend si vous êtes à l'aide de HTML ou JS. Si c'est juste du HTML, vous pouvez envelopper le div dans un a étiquette avec un href (ou même simplement utiliser un a balise au lieu d'un div et le définir comme display: inline-block). Si c'est du JS, vous pouvez écouter un clic sur le div. Ai-je bien compris votre question correctement?
  • oui, je crois que vous avez fait merci, mais la hauteur et la largeur sera "réglé pour correspondre à" utilisation de JS aussi, je suppose? comme dans le cas des OP question de "la div, la hauteur et la largeur n'est pas une valeur fixe", c'est pourquoi je me demandais
  • Je vois. J'ai raté cette partie. Dans ce cas, je pense que vous avez raison, certains JS aurait pour gérer la taille de la div.
InformationsquelleAutor Calmarius | 2011-02-10
  1. 83

    Vous pouvez utiliser le position:fixed;, mais sans left et top. Ensuite, vous le poussez vers la droite à l'aide de margin-left, pour la placer dans la bonne position que vous souhaitez.

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

    • pouvez-vous fournir une référence qui explique pourquoi cela devrait fonctionner? Pourquoi doit navigateurs position d'un fixed élément de cette façon, lorsque top et left ne sont pas spécifiés? stackoverflow.com/questions/8712047/...
    • J'ai écrit le plus alambiqué JS jusqu'à ce que je suis tombé sur ce. Nice.
    • ce n'est pas le comportement souhaité
    • ne fonctionnent pas lorsque le corps parchemins
    • Je suis d'accord ce n'est pas la réponse. il ne gère pas les dynamiques de la largeur de conteneurs comme indiqué dans la question.
    • qu'entendez-vous par "dynamique de la largeur de conteneurs"? Pourriez-vous me donner un exemple?
    • Ce que je voulais dire, c'est que si le vert conteneur parent dans votre jsFiddle pousse 100px de large compte tenu de la dynamique de la largeur du contenu, le bouton fixe n'est pas justifié à droite. Calmarius est tout à fait spécifique sur la variable de la hauteur et la largeur du contenu... comme moi quand j'ai frappé ce problème.
    • Eh bien, c'est la première fois que j'ai vu beaucoup de gens se méprennent une question sur ce site.
    • Si vous faites défiler vers le bas l'élément défile avec la page...

    InformationsquelleAutor Sotiris
  2. 14

    La sélection de la solution semble avoir mal compris le problème.

    L'astuce consiste à utiliser ni absolue ni correction du positionnement. Au lieu de cela, avoir le bouton fermer de l'extérieur de la div avec ses de la position relative des et un flotteur gauche de sorte qu'il est immédiatement à droite de la div. Ensuite, définissez un négatif de la marge de gauche, et une positive z index de sorte qu'il apparaît au-dessus de la 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>
    • Réponse impressionnante, m'a mis sur la voie d'une meilleure solution pour avoir un élément fixe à l'intérieur d'un div scrollable.
    InformationsquelleAutor Joseph
  3. 5

    Position:fixed donne une position absolue concernant la fenêtre du NAVIGATEUR. alors bien sûr, il y va.

    Tout position:absolute se réfère à l'élément parent, de sorte que si vous placez votre <div> bouton à l'intérieur de la <div> du récipient, il doit placer l'endroit où vous signifiait qu'il soit.
    Quelque chose comme

    EDIT: merci à @Sotiris, qui a un point, une solution peut être réalisé à l'aide d'un position:fixed et une marge à gauche. Comme ceci: http://jsfiddle.net/NeK4k/

    • L'utilisateur peut faire défiler à l'écart le bouton fermer si j'utilise absolue (c'était mon premier essai avant d'essayé fixe.)
    • Ressemble à tout le monde de se méprendre envie de le garder sur l'écran. Dans ce cas, vous devez utiliser le javascript pour le positionner correctement par rapport à la div en question, ou d'utiliser javascript pour afficher correctement lors de l'utilisation de la position: absolute
    InformationsquelleAutor Damien Pirsy
  4. 4

    Je sais que c'est un vieux post, mais j'ai eu la même question, mais n'ai pas trouver de réponse que l'ensemble de l'élément fixe par rapport à un parent div. La barre de défilement sur medium.com est un grand pur CSS solution pour mettre quelque chose de position: fixed; par rapport à un élément parent au lieu de la fenêtre d'affichage (un peu*). Il est réalisé en plaçant le parent div à position: relative; et d'avoir un bouton wrapper avec position: absolute; et le bouton de cours est 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

    *Étant donné que les éléments fixes, ne pas faire défiler la page de la position verticale sera toujours par rapport à la fenêtre d'affichage, mais la position horizontale par rapport au parent avec cette solution.

    InformationsquelleAutor Lifehack
  5. 2

    Semble, css transformations peuvent être utilisés

    "‘transformer’ propriété établit un nouveau système de coordonnées local à l'élément",

    mais ... ce n'est pas cross-browser, semble seulement à l'Opéra fonctionne correctement

    • Il fonctionne dans Chrome et Firefox maintenant. Voici un exemple. codepen.io/anon/pen/ZOqrYo
    • Merci @PatrickMcElhaney pour ton exemple, c'est la solution que je cherchais 🙂
    InformationsquelleAutor 4esn0k
  6. 1

    Essayer position:collant sur la div parent de l'élément que vous voulez être fixe.

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

    InformationsquelleAutor Lohit Bisen
  7. 1

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

    J'ai juste eu à envelopper mon élément fixe et de donner à la mère une largeur de 100%. Dans le même temps, le enveloppés élément fixe et la mère sont dans un div dont la largeur en fonction des changements 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 "haut" du bouton, montrant toujours à 15px à partir du bas et 15px droit de le 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;
    }
  }
}
    InformationsquelleAutor agapitocandemor
  8. 0

    Si votre bouton de fermeture va ê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-être simplement:

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