Исправьте DIV в нижнем правом углу

http://www.naomisalsi.com/

Я использовал атрибуты html и body, чтобы иметь фон градиента и фон цветов для вышеуказанного сайта.

Я также использовал div, чтобы иметь нижний правый цветок, где он находится. Отлично работает, но не при прокрутке. Как получить нижнее правое угловое изображение, чтобы придерживаться нижней части экрана?

Ответ 1

Вам нужно установить position: fixed; вместо position: absolute;.

Ответ 2

если вы положите цветок внутри div и поместите его в абсолютное нижнее и правое, то оно будет вставлять его там.

Например, что-то вроде этого будет работать

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

вам может потребоваться настроить его, чтобы он сидел там, где вы хотите, а также, возможно, добавить z-index

Ответ 3

Если вам нужна анимация, установите div как абсолютный перед анимацией, а затем после того, как анимация снова установит ее в качестве примера ниже.

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

css для вышеуказанного div также ниже.

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

Я знаю, что это старо, но это определенно поможет кому-то:)

Ответ 4

Для выполнения этой задачи может потребоваться использование JavaScript. Такие методы позволят вам добиться желаемого эффекта, но они не очень ожидают анимации. При прокрутке такой "застрявший" объект будет стремиться пропустить и заикаться. Я нашел пример здесь, но сам не пробовал. Я рекомендую найти несколько примеров и попробовать тот, который выглядит самым чистым и современным.

Ответ 5

Вы хотите установить позицию: fixed; вместо положения: absolute;

Ответ 6

Трюк css-only для этого старого поста должен положить a после div и поместить верхний -1.2em, чтобы он перекрывал нижнюю часть элемента над ним.

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/