Fix DIV a esquina inferior derecha

Question

http://www.naomisalsi.com/

he utilizado html y el cuerpo atributos para tener un fondo de gradiente y un fondo de flores para el sitio anteriormente.

También he usado un div para tener la flor inferior derecha donde está. Funciona muy bien, pero no cuando se desplaza. ¿Cómo obtengo la imagen de la esquina inferior derecha para pegarme en la parte inferior de la pantalla?

Answer 1

Usted tendrá que ajustar position: fixed; en lugar de position: absolute;.

Answer 2

Es posible que necesite utilizar JavaScript para realizar esta tarea. Tales técnicas lograrán el efecto que deseas, pero no suelen ser animadas sin problemas. Al desplazarse, un objeto "atascado" tenderá a saltar y tartamudear. Encontré un ejemplo here pero no lo he probado yo mismo. Recomiendo buscar algunos ejemplos y probar el que parece más limpio y moderno.

Answer 3

si pones la flor dentro de un div y la colocas en la parte inferior absoluta y derecha, esta se quedará allí.

Por ejemplo, algo como esto funcionará

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

es posible que tenga que ajustar para conseguir que se asentó en la que desea y tal vez añadir un índice z

Answer 4

Si necesita animación, establezca div como absoluta antes de la animación y luego, después de la animación, configúrelo como fijo como en el ejemplo siguiente.

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

css para la div anterior es abajo también.

.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; 
} 

Sé que esto es viejo, pero sin duda le ayudará a alguien :)

Answer 5

Usted tendrá que ajustar la posición: fijo; en lugar de posición: absoluto;

Answer 6

Un truco de solo css para esta publicación anterior es poner un después del div y ubicar el -1.2em superior para que se superponga con la parte inferior del elemento encima.

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/