Fix DIV vers le coin en bas à droite

Question

http://www.naomisalsi.com/

J'ai utilisé les attributs html et le corps pour avoir un fond dégradé et un fond de fleurs pour le site ci-dessus.

J'ai aussi utilisé un div pour avoir la fleur en bas à droite là où elle est. Fonctionne bien, mais pas lors du défilement. Comment puis-je obtenir l'image du coin inférieur droit pour coller au bas de l'écran?

Answer 1

Vous voulez mettre position: fixed; au lieu de position: absolute;.

Answer 2

Vous devrez peut-être utiliser JavaScript pour accomplir cette tâche. Ces techniques accompliront l'effet que vous désirez, mais elles ne sont pas très animées. Lors du défilement, un tel objet "coincé" aura tendance à sauter et à bégayer. J'ai trouvé un exemple here mais je ne l'ai pas essayé moi-même. Je recommande de chercher quelques exemples et d'essayer celui qui semble le plus propre et le plus moderne.

Answer 3

Si vous placez la fleur à l'intérieur d'une div et la positionner en bas absolu et à droite, elle y restera collée.

Par exemple, quelque chose comme cela fonctionnera

#mystylename{ 
    position:absolute; 
    bottom:0; 
    right:0; 
} 

vous pouvez avoir besoin de ruser pour obtenir assis où vous voulez et ajouter aussi peut-être un z-index

Answer 4

Si vous avez besoin d'une animation, définissez div comme absolu avant l'animation, puis, après l'animation, réglez-le sur fixed comme dans l'exemple ci-dessous.

$('.mydiv').animate({ 
opacity: 1, 
right: "50px", 
bottom: "50px", 
height: "toggle" 
}, 1000, function() { 
// Animation complete. 
}).css('position','fixed'); 

css pour le div ci-dessus est également ci-dessous.

.mydiv { 
    text-align: center; 
    background: #00DD88; 
    background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent; 
    border-radius: 30px 30px 30px 30px; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
    margin: 5px 0 10px 15px; 
    position: absolute; 
    right: -980px; 
    width: 200px; 
    height: 50px; 
    display: none; 
    z-index: 100; 
} 

je sais que c'est vieux, mais il va certainement aider quelqu'un :)

Answer 5

Vous voulez définir la position: fixed; au lieu de position: absolue;

Answer 6

Une astuce css-only pour cet ancien post est de mettre un après le div et positionner le -1.2em supérieur de sorte qu'il chevauche le bas de l'élément au-dessus.

html:

<textarea class="no-whitespace-right">This is a test resize it.</textarea> 
<span class="float-lower-left">length could go here</span> 

css:

.no-whitespace-right { 
    /* any whitespace to the right and the overlap trick fails */ 
    width: 100%; 
} 

.float-lower-left { 
    position: relative; 
    float: right; 
    right: 1em; 
    top: -1.2em; 
    /* push it up into the element before it. This is a trick for bottom-right */ 
    right: 1em; 
    z-index: 200; 
    opacity: 0.5; 
    font-weight:bolder; 
} 

https://jsfiddle.net/qwm3pu8d/