Comment faire un DIV flottent toujours sur l'écran en haut à droite?

Comment puis-je faire une DIV qui flottent toujours sur l'écran en haut à droite du coin, de sorte que même quand j'ai faites défiler la page vers le bas, la DIV apparaît toujours dans le même emplacement fixe? Merci.

  • voir ce lien , je pense que vous voulez à l'opposé de collant flottante du pied de page.stackoverflow.com/questions/146659/...
InformationsquelleAutor akanevsky | 2010-11-21
  1. 79

    Utilisation position: fixed, et fixez-le au top et right côtés de la page:

    #fixed-div {
    position: fixed;
    top: 1em;
    right: 1em;
}

    IE6 ne supporte pas position: fixed, cependant. Si vous avez besoin de cette fonctionnalité dans IE6, ce purement CSS solution semble faire l'affaire. Vous aurez besoin d'un wrapper <div> de contenir une partie des styles pour que cela fonctionne, comme on le voit dans le la feuille de style.

    • Merci, mais j'ai besoin d'une solution de navigateur, de savoir si ou non elle porte uniquement sur CSS ou un mélange de CSS et de Javascript.
    • Commentaire sur la position:fixe ne fonctionne pas dans IE, howtocreate.co.uk/fixedPosition.html c'est la solution de contournement pour ce.
    • êtes-vous ok avec fonction jquery $(window).scroll(function () { }); nous pouvons alors facilement la position que lors de l' ....à droite à l'aide de jquerys animer
    • Tout en répondant à une autre question j'ai réussi à comprendre pourquoi la solution que j'ai lien semble fonctionner. Si vous êtes curieux de connaître les détails, ils sont tous ici: stackoverflow.com/questions/14718319/...
    InformationsquelleAutor BoltClock
  2. 11

    Utilisation position:fixed, comme indiqué précédemment, IE6 ne reconnaît pas position:fixed, mais avec un peu de css de magie que vous pouvez obtenir de IE6 à se comporter:

    html, body {
    height: 100%;
    overflow:auto;
}
body #fixedElement {
    position:fixed !important;
    position: absolute; /*ie6 */
    bottom: 0;
}

    La !important drapeau fait de sorte que vous n'avez pas à utiliser un commentaire conditionnel pour IE. Cela aura #fixedElement utilisation position:fixed dans tous les navigateurs, mais IE, et dans IE, position:absolute prendra effet bottom:0. Cela permettra de simuler position:fixed pour IE6

    • Vous pouvez également utiliser * html body #fixedElement { position: absolute; } après que la règle.
    • Fait en Chrome, mais la 2ème position overwires le "fixe", je voudrais donc inverser l'ordre de ces deux. Qui fera ce travail
    • Il ne devrait pas si vous avez ajouté le !important drapeau correctement. Cela dit, bien sûr, la permutation de deux œuvres ainsi, sans la nécessité pour !important.
    InformationsquelleAutor Alex