Make div fixed on page scroll in angular

Question

I currently have a screen layout like this

I have to render componene 2 inside component 3 in below way

Due to certain restrictions i cannot put angular component 3 inside angular component 2

so what i have done is to use css to achieve the desired effect

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

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

I have achieved the desired output however once user scrolls page the component 2 keeps showing on page. It is not supposed to scroll

what can i do for it ?

You can try position: sticky. css-tricks.com/position-sticky-2 — Harun Yilmaz
– Harun Yilmaz, Commented Sep 26, 2019 at 6:53
Then please update you question. You wrote: Due to certain restrictions i cannot put angular component 2 inside angular component 3. Then it should be the other way around? — Jens Alenius
– Jens Alenius, Commented Sep 26, 2019 at 7:13
@HarunYilmaz when i put postion: sticky and bottom: 0 it does stick.. but requirment is not met.. the comp2 is not getting overlapped on comp 3 — pankaj
– pankaj, Commented Sep 26, 2019 at 7:20

Saksham · Accepted Answer · 2019-09-26 07:26:06Z

3

You need to position component 2 absolutely wrt component 1 and transform the origin to make it stick to the bottom edge as

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

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

answered Sep 26, 2019 at 7:26

Saksham

9,4209 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make div fixed on page scroll in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related