2010-11-21 7 views
47

Comment est-ce que je fais toujours un DIV flotter toujours dans le coin supérieur droit de l'écran, de sorte que même lorsque je fais défiler la page vers le bas, le DIV apparaît toujours dans le même emplacement fixe? Merci.Comment faire un DIV toujours flotter sur l'écran dans le coin en haut à droite?

+0

voir ce lien, je pense que vous voulez le contraire de footy flottant footer.http: //stackoverflow.com/questions/146659/how-do-i-get-floating-footer- to-stick-to-the-bottom-of-the-viewport-in-ie-6 – kobe

Répondre

69

Utilisez position: fixed, et l'ancrer aux côtés de top et right 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, this purely-CSS solution semble faire l'affaire. Vous aurez besoin d'un wrapper <div> pour contenir certains des styles pour que cela fonctionne, comme le montre le stylesheet.

+0

Merci, mais j'ai besoin d'une solution cross-browser, que ce soit ou non seulement CSS ou un mélange de CSS et Javascript. – akanevsky

+0

@akavsky Êtes-vous d'accord avec la fonction jquery $ (window) .scroll (function() { }); alors nous pouvons facilement positionner cela au .... coin droit en utilisant jquerys animer – kobe

+0

Pour commenter la position: fixe ne fonctionnant pas dans IE, http://www.howtocreate.co.uk/fixedPosition.html est la solution de contournement pour cette . – digitalfoo

11

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

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

Le drapeau !important le rend si vous n'avez pas à utiliser un commentaire conditionnel pour IE. Cela aura #fixedElement utiliser position:fixed dans tous les navigateurs, mais IE, et dans , position:absolute prendra effet avec bottom:0. Cela simulera position:fixed pour IE6

+1

Vous pouvez également utiliser '* html body #fixedElement {position: absolute; } 'après cette règle. – BoltClock

+0

@BoltClock Bon point. – Alex

+0

L'a fait dans Chrome, mais la 2ème position a priorité sur le 'fixed', donc je voudrais échanger l'ordre de ces deux. Cela rendra ce travail – patrick

Questions connexes