web-dev-qa-db-fra.com

Fixer DIV dans le coin inférieur droit

http://www.naomisalsi.com/

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

J'ai également utilisé une div pour avoir la fleur en bas à droite là où elle se trouve. Fonctionne très bien, mais pas lors du défilement. Comment puis-je obtenir l'image de coin en bas à droite pour coller au bas de l'écran?

cssbackground
16
user195257

Vous voudrez définir position: fixed; au lieu de position: absolute;.

32
stephenhay

si vous mettez la fleur à l'intérieur d'une div et la positionnez en bas absolu et à droite, cela la collera là.

Par exemple, quelque chose comme ça va marcher

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

vous devrez peut-être modifier le logiciel pour qu'il soit assis où vous voulez et peut-être ajouter un z-index

29
Joe Morris

Si vous avez besoin d'animation, définissez div en absolu avant l'animation puis, après l'animation, réglez-la sur l'exemple ci-dessous.

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

cSS pour la div ci-dessus est aussi en 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 ça va certainement aider quelqu'un :)

2
Oliver M Grech

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

1
jkndrkn

Une astuce pour ce post ancien consiste à mettre un après la div et à positionner le haut -1.2em de manière à ce 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;
}

 enter image description here

https://jsfiddle.net/qwm3pu8d/

1
TrophyGeek

Vous voudrez définir la position: fixed; au lieu de position: absolu;

0
user2654735