Сделать div фиксированным на странице прокрутки в угловой

Question

В настоящее время у меня есть макет экрана, подобный этому

Мне нужно визуализировать компонент 2 внутри компонента 3 следующим образом

Из-за определенных ограничений я не могу поместить угловой компонент 3 внутри углового компонента 2

, поэтому я использовал css для достижения желаемого эффекта

.component3 {
    position: relative;
 z-index: 1
}

.component2 {
   position: absolute;
  margin-left: calc(100% - 169px);
  margin-top: 13px;
  z-index: 2;
}

Я достиг желаемого результата, однако, как только пользователь прокручивает страницу, компонент 2 продолжает показываться на странице.Он не должен прокручиваться

что я могу для него сделать?

Answer 1

Вам необходимо расположить компонент 2 абсолютно по отношению к компоненту 1 и преобразовать начало координат, чтобы оно прилипало к нижнему краю как

position: absolute;
bottom: 0;
transform: translate(0, 100%);
right: 0;

Fiddle в https://jsfiddle.net/saksham_malhotra/xkmqy8Lh/