wake-up-neo.com

Befestigen Sie DIV in der rechten unteren Ecke

http://www.naomisalsi.com/

Ich habe HTML- und Körperattribute verwendet, um einen Farbverlaufshintergrund und einen Blumenhintergrund für die obige Site zu haben.

Ich habe auch ein div verwendet, um die rechte untere Blume dort zu haben, wo sie ist. Funktioniert super, aber nicht beim Scrollen. Wie bekomme ich das Bild in der unteren rechten Ecke am unteren Rand des Bildschirms?

cssbackground
16
user195257

Sie möchten statt position: fixed;position: absolute; einstellen.

32
stephenhay

wenn Sie die Blume in ein div legen und sie absolut unten und rechts positionieren, wird sie dort haften bleiben.

Zum Beispiel wird so etwas funktionieren

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

möglicherweise müssen Sie es anpassen, um es an den gewünschten Ort zu bringen und möglicherweise einen Z-Index hinzuzufügen

29
Joe Morris

Wenn Sie eine Animation benötigen, setzen Sie div vor der Animation als absolut und dann nach der Animation auf fix (siehe folgendes Beispiel).

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

css für das obige div ist ebenfalls unten.

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

Ich weiß, das ist alt, aber es wird auf jeden Fall jemandem helfen :)

2
Oliver M Grech

Möglicherweise müssen Sie JavaScript verwenden, um diese Aufgabe auszuführen. Solche Techniken erzielen den gewünschten Effekt, sind jedoch nicht sehr sanft animiert. Beim Scrollen neigt ein solches "festgeklemmtes" Objekt zum Überspringen und Stottern. Ich fand ein Beispiel hier , habe es aber selbst nicht ausprobiert. Ich empfehle, nach einigen Beispielen zu suchen und dasjenige auszuprobieren, das am saubersten und modernsten aussieht.

1
jkndrkn

Ein einzigartiger Trick für diesen alten Beitrag besteht darin, a nach dem div zu setzen und das obere -1.2em so zu positionieren, dass es die Unterseite des übergeordneten Elements überlappt.

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

Sie möchten die Position festlegen: fest; statt Position: absolut;

0
user2654735